Горизонтальная панель навигации CSS
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Элементы встроенного списка
Один из способов построить горизонтальную панель навигации — указать элементы <li> как встроенные в дополнение к «стандартному» коду с предыдущей страницы:
Пример
li
{
display: inline;
}
Объяснение примера:
display: inline;- По умолчанию элементы <li> являются блочными элементами. Здесь мы удаляем разрывы строк до и после каждого элемента списка, чтобы отображать их в одной строке.
Элементы плавающего списка
Другой способ создания горизонтальной панели навигации — сделать плавающими элементы <li> и указать макет для навигационных ссылок:
Пример
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Объяснение примера:
float: left;- Используйте float, чтобы элементы блока плавали рядом друг с другомdisplay: block;- Позволяет указать отступы (а также высоту, ширину, поля и т. д., если хотите)padding: 8px;- Укажите некоторые отступы между каждым элементом <a>, чтобы они хорошо выглядели.background-color: #dddddd;- Добавьте серый фоновый цвет к каждому элементу <a>
Совет: добавьте фоновый цвет в <ul> вместо каждого элемента <a>, если вы хотите использовать цвет фона во всю ширину:
Пример
ul
{
background-color: #dddddd;
}
Примеры горизонтальной панели навигации
Создайте базовую горизонтальную панель навигации с темным цветом фона и измените цвет фона ссылок, когда пользователь наводит на них указатель мыши:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Активная/текущая навигационная ссылка
Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Пример
.active {
background-color: #04AA6D;
}
Ссылки с выравниванием по правому краю
Выровняйте ссылки по правому краю, перемещая элементы списка вправо ( float:right;):
Пример
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Пограничные разделители
Добавьте border-rightсвойство в <li> для создания разделителей ссылок:
Пример
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Фиксированная панель навигации
Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:
Фиксированный верх
ul {
position: fixed;
top: 0;
width: 100%;
}
Фиксированное дно
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Примечание. Фиксированное положение может работать некорректно на мобильных устройствах.
Серая горизонтальная панель навигации
Пример серой горизонтальной панели навигации с тонкой серой рамкой:
Пример
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Липкая панель навигации
Добавьте position: sticky;в <ul>, чтобы создать липкую панель навигации.
Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданная позиция смещения — тогда он «застревает» на месте (например, position:fixed).
Пример
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Примечание. Internet Explorer не поддерживает фиксированное позиционирование. Для Safari требуется префикс -webkit- (см. пример выше). Вы также должны указать по крайней мере один из top, right, bottomили leftдля работы фиксированного позиционирования.
Дополнительные примеры
Отзывчивый Topnav
Как использовать медиа-запросы CSS для создания адаптивной верхней навигации.
Отзывчивый Сиденав
Как использовать медиа-запросы CSS для создания адаптивной боковой навигации.
Выпадающая панель навигации
Как добавить выпадающее меню в панель навигации.
Вы когда- нибудь слышали о W3Schools Spaces ? Здесь вы можете создать свой сайт с нуля или использовать шаблон и разместить его бесплатно.
Начните бесплатно ❯* кредитная карта не требуется