TechCodeview

Шта је ЦСС навигациона трака?

У ЦСС-у, трака за навигацију је, такође позната као навигациона трака, која се користи у интерфејсу за пружање навигационих веза или менија различитим селекторима или корисницима страница у дизајну веб странице. Корисници могу лако да се крећу по садржају веб локације користећи га као визуелни водич.

ц примери програмирања програма

Уз помоћ траке за навигацију можемо побољшати презентацију и стил веб странице, а она такође укључује дизајн, боје, фонтове и размаке описане помоћу ЦСС-а. ЦСС навигациона трака је развијена и стилизована коришћењем ЦСС својстава и правила како би се произвео одређени изглед и функционалност.

Карактеристике ЦСС навигационе траке

Неке карактеристике траке за навигацију су следеће:

Опције распореда:У ЦСС-у, трака за навигацију може бити постављена или вертикално дуж стране веб странице или можемо поставити хоризонтално преко врха.Линкови за навигацију:Мени садржи везе ка разним страницама и одељцима сајта. Ове везе често имају дугмад, текст или иконе.Падајући менији:Падајући менији су још једна функција која се може додати на траке за навигацију. Додатне везе или опције се приказују када корисник пређе мишем преко или изабере ставку менија.Стил:ЦСС омогућава дизајнерима да мењају визуелне елементе траке за навигацију, као што су боје, фонтови, ивице и ефекти лебдења. Ово помаже у стварању јединственог и визуелно привлачног дизајна који се уклапа са целокупном естетиком веб локације.Нацрт са одзивом:Модерне траке за навигацију су често дизајниране са одзивом, које се прилагођавају различитим величинама екрана и уређајима. Уз помоћ респонзивног дизајна, можемо гарантовати да ће навигација и даље бити атрактивна и пријатна на десктоп и мобилним уређајима.интеракција:уз помоћ ЦСС-а, такође можемо да се користимо за додавање интерактивних ефеката елементима за навигацију, као што је промена боје везе када се на њу кликне, или такође може да прикаже ефекат истицања када се пређе мишем преко њега.

Уз помоћ ЦСС траке за навигацију, можемо побољшати корисничко искуство и олакшати посетиоцима навигацију кроз садржај веб сајта, тако да је то кључни део веб дизајна.

Пример

Узмимо једноставан пример како можемо да направимо хоризонталну траку за навигацију користећи ЦСС:

 /* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> 

Излаз:

На хоризонталној траци за навигацију овог примера креира се пет веза: „Кућа“, „О нама“, „Услуге“, „Портфолио“ и „Контакт“. Користили смо основна својства ЦСС-а да стилизујемо траку за навигацију, везе и ефекте лебдења. Ваш жељени дизајн може се одразити на боје, фонтове, паддинг и друге стилове.

Ограничење ЦСС траке за навигацију

Постоје нека ограничења ЦСС траке за навигацију, а нека су следећа:

Ограничена сложеност интеракције:Док ЦСС може да произведе једноставне ефекте лебдења и прелазе, ЈаваСцрипт ће можда морати да примени сложеније интерактивне функције као што су угнежђени падајући менији са више нивоа.Компатибилност са различитим претраживачима:Различити веб претраживачи могу различито тумачити ЦСС правила тако да се траке за навигацију могу појавити и понашати другачије. Може бити изазовно осигурати уједначен дизајн у свим претраживачима.Изазови респонзивног дизајна:Прављење траке за навигацију која добро функционише на различитим екранима и уређајима може бити тешко. Често су потребни медијски упити и додатна ЦСС правила да би се променио изглед траке за навигацију за различите резолуције екрана.Ограничена анимација:ЦСС може да обрађује основне анимације, али ЈаваСцрипт или ЦСС библиотеке могу бити потребне за креирање сложенијих анимација или ефеката, као што је глатко померање.Комплексни стил:Креирање веома јединствених и замршених дизајна за траке за навигацију може захтевати софистициране ЦСС технике, које може бити изазовно ажурирати.Проблеми са приступачношћу:Траке за навигацију направљене у потпуности од ЦСС-а можда нису увек у складу са смерницама за читаче екрана и друге помоћне технологије. Да бисте били сигурни да је навигација доступна свим корисницима, потребно је обратити посебну пажњу.

Упркос овим недостацима, свестраност и широка употреба ЦСС навигационих трака у веб дизајну и даље постоји. Међутим, можда ће морати да буду допуњени ЈаваСцрипт-ом и другим технологијама за софистицираније функције и беспрекорно корисничко искуство.

Хоризонтална трака за навигацију

Хоризонтална навигациона трака је хоризонтална листа веза, која се углавном налази на врху странице.

Хајде да видимо како да креирамо хоризонталну траку за навигацију користећи пример.

Пример

У овом примеру додајемо преливање: скривено својства која спречавају то елементи од изласка ван листе, дисплеј блок својство приказује везе као блок елементе и чини читаву област везе на коју се може кликнути.

цео број у низ

Такође додајемо плутати: лево својство, које користи флоат да натера блок елементе да их померају један поред другог.

Ако желимо боју позадине пуне ширине, морамо додати боја позадине власништво до

низ стрингова у ц

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Граничне преграде

Можемо да додамо границу између веза у траци за навигацију користећи граница-десно имовина. Следећи пример то јасније објашњава.

Пример

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Фиксне траке за навигацију

Када померамо страницу, фиксне траке за навигацију остају на дну или на врху странице. Погледајте пример истог.

Пример

 ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3>