Какво е CSS навигационна лента?

В CSS навигационната лента е, известна още като навигационна лента, използвана в интерфейс за предоставяне на навигационни връзки или менюта на различни селектори или потребители на страница в дизайна на уебсайта. Потребителите могат лесно да навигират в съдържанието на уебсайта, като го използват като визуално ръководство.

upcasting

С помощта на лента за навигация можем да подобрим представянето и стила на уеб страница, а също така включва дизайна, цветовете, шрифтовете и интервалите, описани с помощта на CSS. CSS навигационната лента е разработена и стилизирана с помощта на CSS свойства и правила, за да се създаде конкретен външен вид и функционалност.

Характеристики на CSS навигационната лента

Някои характеристики на лентата за навигация са както следва:

Опции за оформление:В CSS лентата за навигация може да бъде позиционирана или вертикално отстрани на уеб страница, или можем да позиционираме хоризонтално в горната част.Линкове за навигация:Менюто съдържа връзки към различни страници и раздели на сайта. Тези връзки често имат стил на бутон, текст или икона.Падащи менюта:Падащите менюта са друга функция, която може да се добави към навигационните ленти. Допълнителни връзки или опции се показват, когато потребителят задържи курсора на мишката върху или избере елемент от менюто.стил:CSS позволява на дизайнерите да променят визуалните елементи на лентата за навигация, като цветове, шрифтове, рамки и ефекти при задържане. Това помага за създаването на единен и визуално привлекателен дизайн, който се слива с цялостната естетика на уебсайта.Адаптивен дизайн:Съвременните навигационни ленти често са с адаптивен дизайн, който се адаптира към различни размери на екрана и устройства. С помощта на адаптивния дизайн можем да гарантираме, че навигацията ще продължи да бъде привлекателна и приятна на настолни и мобилни устройства.Взаимодействие:с помощта на CSS можем също да се използваме за добавяне на интерактивни ефекти към елементите за навигация, като например промяна на цвета на връзката, когато се щракне върху нея, или може също да покаже ефекта на подчертаване, когато се задържи над нея.

С помощта на CSS лента за навигация можем да подобрим потребителското изживяване и да направим посетителите лесни за навигация в съдържанието на уебсайта, така че това е ключова част от уеб дизайна.

Пример

Нека вземем прост пример за това как можем да създадем хоризонтална лента за навигация с помощта на CSS:

 /* 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> 

Изход:

Пет връзки се създават в хоризонталната навигационна лента на този пример: „Начало“, „Относно“, „Услуги“, „Портфолио“ и „Контакт“. Използвахме основни свойства на CSS, за да стилизираме лентата за навигация, връзките и ефектите при задържане. Вашият предпочитан дизайн може да бъде отразен в цветовете, шрифтовете, подложките и други стилове.

Ограничение на лентата за навигация на CSS

Има някои ограничения на лентата за навигация на CSS и някои от тях са както следва:

Ограничена сложност на взаимодействието:Докато CSS може да създаде прости ефекти и преходи при задържане, JavaScript може да се наложи да внедри по-сложни интерактивни функции като вложени падащи менюта с множество нива.Съвместимост между различни браузъри:Различните уеб браузъри могат да интерпретират CSS правилата по различен начин, така че навигационните ленти да се показват и да се държат по различен начин. Може да бъде предизвикателство да се осигури еднакъв дизайн във всички браузъри.Предизвикателства при адаптивния дизайн:Създаването на лента за навигация, която да функционира добре на различни екрани и устройства, може да бъде трудно. Често се изискват медийни заявки и допълнителни CSS правила, за да се промени оформлението на лентата за навигация за различни резолюции на екрана.Ограничена анимация:CSS може да обработва основни анимации, но JavaScript или CSS библиотеки може да са необходими за създаване на по-сложни анимации или ефекти, като плавно превъртане.Сложен стайлинг:Създаването на изключително уникален и сложен дизайн за навигационни ленти може да изисква сложни CSS техники, чието актуализиране може да бъде предизвикателство.Проблеми с достъпността:Навигационните ленти, направени изцяло от CSS, може не винаги да се придържат към указанията за екранни четци и други помощни технологии. За да сте сигурни, че навигацията е достъпна за всички потребители, трябва да се положат допълнителни грижи.

Въпреки тези недостатъци, гъвкавостта и широкото използване на CSS навигационните ленти в уеб дизайна продължават. Въпреки това може да се наложи те да бъдат допълнени с JavaScript и други технологии за по-сложни функции и безпроблемно потребителско изживяване.

Хоризонтална лента за навигация

Хоризонталната лента за навигация е хоризонталният списък с връзки, който обикновено е в горната част на страницата.

Нека да видим как да създадем хоризонтална лента за навигация с помощта на пример.

Пример

В този пример добавяме преливане: скрито собственост, която предотвратява че елементи от излизане извън списъка, дисплей: блок показва връзките като блокови елементи и прави цялата област на връзката с възможност за кликване.

сортиране на списък по java

Ние също добавяме float: ляво свойство, което използва float, за да накара блоковите елементи да ги плъзгат един до друг.

Ако искаме цвета на фона с пълна ширина, тогава трябва да добавим Цвят на фона собственост към

релационна алгебра в rdbms

 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>