CSS Панель навигации
Демонстрация: панелей навигации
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель авигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации - это в основном список ссылок, поэтому использование элементов <ul>
и естественно <li>:
Пример
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="contact.html">Контакты</a></li>
<li><a href="about.html">О Нас</a></li>
</ul>
Редактор кода »
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример объяснение:
list-style-type: none;- Убирает маркеры. В панели навигации не нужны маркеры для списка- Установить
margin: 0;иpadding: 0;чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a>
в списке, к дополнению коду выше:
Объяснение примера:
display: block;- Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)width: 60px;- Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей
Вы также можете установить ширину <ul> и удалить ширину <a>,
поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока.
Это приведет к тому же результату, что и в предыдущем примере:
Пример
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 70px;
}
li
a
{
display: block;
}
Редактор кода »
Пример вертикальной панели навигации
Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Редактор кода »
Активная и текущая ссылка навигации
Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Центральные ссылки и добавить границы
Добавить выравнивание text-align:center в <li> или
<a>ссылки по центру.
Добавить свойство border в <ul>.
Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели,
нужно добавить border-bottom во все элементы <li>,
за исключением последнего:
Пример
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Редактор кода »
Фиксированная вертикальная навигация
Создать в полную в высоту, "фиксированную" боковую панель навигации:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Полная высота */
position: fixed; /*
Сделайте его придерживаться, даже на прокрутки */
overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}
Редактор кода »
Примечание: Этот пример может работать неправильно на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Встроенные элементы списка
Одним из способов построения горизонтальной панели навигации является указание элементов <li>
как встроенные, кроме того в "стандартные" в коде выше:
Объяснение примера:
display: inline;- По умолчанию, элементы<li>- это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающие элементы списка
Другой способ создания горизонтальной навигации, плавают элементы <li>
им нужно указать расположение для навигационных ссылок:
Пример
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Редактор кода »
Объяснение примера:
float: left;- Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другомdisplay: block;- Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)padding: 8px;- Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красивоbackground-color: #dddddd;- Добавить серый фон цвета к каждому элементу
Совет: Добавить background-color: #dddddd; в
<ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:
Примеры горизонтальной панели навигации
Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
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;
}
/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
background-color:
#111;
}
Редактор кода »
Активная и текущая ссылка навигации
Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Выравнивание списка по правому краю
Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:
Пример
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#news">Новости</a></li>
<li><a href="#contact">Контакты</a></li>
<li style="float:right"><a
class="active" href="#about">О Нас</a></li>
</ul>
Редактор кода »
Разделители границ списка
Добавить свойство border-right в <li> для создания разделителей ссылок:
Пример
/* Добавление серой правой границы ко всем элементам списка, кроме последнего
(последний ребенок) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Редактор кода »
Фиксированные горизонтальные панели навигации
Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:
Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.
Серая горизонтальная панель навигации
Пример серой горизонтальной панели навигации, с тонкой серой границей:
Пример
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Редактор кода »
Липкая панель навигации
Использовать position: sticky; в <li>, чтобы создать липкую навигацию.
Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки.
Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране -
тогда он "прилипает" на месте (например, position:fixed).
Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование.
Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top,
right, bottom или left для
липкое позиционирование работы.
Еще примеры
Отзывчивая верхняя навигация
Как использовать медиа запросы CSS для создания адаптивной верхней навигации.
Отзывчивая боковая навигация
Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.
