Панель навигации
Наличие простой и понятной навигации жизненно важно для любого веб-сайта.
При помощи CSS вы можете преобразовать скучные HTML меню в красивые и удобные для использования навигационные панели.
Вертикальная
Горизонтальная
Панель навигации = Список ссылок
Для создания панели навигации в качестве базы нужен стандартный код HTML.
В наших примерах мы будем делать панели навигации из стандартных списков HTML.
-
и
идеально подходят для этих целей:
Теперь удалим у списка маркеры, отступы и поля:
- Удаляем маркеры: list-style-type: none; . В панели навигации маркеры списка не нужны.
- Зададим margin: 0; и padding: 0; , чтобы сбросить установки браузера по умолчанию.
Приведенный выше код является стандартным и используется как в вертикальных, так и в горизонтальных панелях навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, дополнительно к ранее рассмотренному коду добавляем стили для элементов , расположенных внутри списка:
li a
- display: block; — Отображение ссылок как блоковых элементов делает всю область ссылки (а не только текст ссылки) кликабельной, а также позволяет определять ширину ссылки (при желании также можно задавать высоту, отступы, поля и т.д.)
- width: 60px; — По умолчанию блоковый элемент занимает всю ширину. Мы задаем ширину в 60 пикселей
ul < list-style-type: none; margin: 0; padding: 0; width: 60px; >li a
Примеры вертикальных панелей навигации
Создадим базовую вертикальную панель навигации с серым фоном, ссылки которой меняют фоновый цвет при наведении курсора мыши:
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; >/* Изменяем цвет ссылки при наведении курсора */ li a:hover
Активная/текущая ссылка навигации
Добавим класс «active» для текущей ссылки, чтобы пользователь знал на какой странице он находится:
.active
Центрирование ссылок и добавление рамок
-
. Если также нужна рамка внутри панели навигации, добавьте свойство border-bottom для всех элементов
, кроме последнего:
ul < border: 1px solid #555; >li < text-align: center; border-bottom: 1px solid #555; >li:last-child
Вертикальная панель навигации, зафиксированная на всю высоту
Создаем «прилипающую» во всю высоту боковую панель навигации:
Предупреждение: Данный пример может работать некорректно на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создать горизонтальную панель навигации. Это сделать элементы списка строчными или применить обтекание.
Строчные элементы списка
- display: inline; — По умолчанию элемент
- является блочным элементом. Здесь же мы убираем перенос строки перед и после элементов и устанавливаем отображение их в одну строку
Обтекание элементов списка
li < float: left; >a
- float: left; — Используем, чтобы заставить блочные элементы обтекать друг друга
- display: block; — Позволяет нам определить для ссылок поля (а также высоту, ширину, отступы и т.д.)
- padding: 8px; — Определяем поля между элементами , чтобы они выглядели красиво
- 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; >/* При наведении мыши меняем фон ссылки на #111 (черный) */ li a:hover
Активная/текущая ссылка навигации
Добавим класс «active» для текущей ссылки, чтобы пользователь знал на какой странице он находится:
.active
Выроненные справа ссылки
Можно выровнять ссылки по правому краю. Для этого задайте обтекание справа для элементов списка ( float: right; ):
Вертикальный разделитель ссылок
/* Добавляем серую рамку справа от всех элементов списка */ li < border-right: 1px solid #bbb; >/* за исключением последнего (last-child) */ li:last-child
Зафиксированная панель навигации
Можно сделать так, чтобы, даже при прокрутке страницы панель навигации оставалась вверху:
или внизу страницы:
Предупреждение: Данные примеры могут работать некорректно на мобильных устройствах.
Прилипающая панель навигации
Прилипающий элемент переключается между значениями position: relative и position: fixed , в зависимости от его положения при прокрутке страницы. Пока элемент находится в видимой области просмотра, он ведет себя как со значением position: relative . Когда его положение достигает края области просмотра, он «прилипает» на месте (как при position: fixed ).
Примечание: Internet Explorer не поддерживает прилипающие элементы. В Safari нужно добавлять префикс -webkit- (см. пример выше). Также, чтобы прилипающий элемент заработал, нужно обязательно определить по меньшей мере одно из свойств top , right , bottom или left .
Как сделать верхнюю панель в html
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block , что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки, которые характерны для блочных элементов.
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block :
Навигационные панели с помощью CSS
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
Изначально, без стилей наша навигация выглядит, как обычный список:
Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding , заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
.menu
По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
Вертикальное меню
Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
Блочные ссылки
Прежде всего нужно сделать все теги блочными элементами:
.menu a
Существует несколько причин для этого:
- Вы сможете задавать отступы для ссылок.
- Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет: Строчные ссылки могут быть разной длины, что негативно отразится на внешнем виде.
- Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов padding можно увеличить область кликабельности еще и по высоте.
Ширина меню
Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu , например:
.menu
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu :
.menu a < border-top: 1px solid blue; >.menu
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height :
.menu a
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block :
.menu li
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
.menu a
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right :
.menu li
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
.menu li
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, ), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
.menu
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after . Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание: если вы установите фон для элемента .menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать стили ссылкам в зависимости от атрибутов и их значений.
CSS Панель навигации
Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.
С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
-
и
элементы имеет смысл:
пример
Теперь давайте уберем пули и поля и отступы из списка:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
>
- list-style-type: none; — Удаляет пули. Панель навигации не нужен список маркеров
- Установить margin: 0; и padding: 0; для удаления настроек браузера по умолчанию
Код в приведенном выше примере стандартный код используется в обоих вертикальных и горизонтальных панелей навигации.
Вертикальная панель навигации
Чтобы построить вертикальную панель навигации, вы можете стиль элементов внутри списка, в дополнение к указанному выше коду:
пример
li a <
display: block;
width: 60px;
>
- display: block; — Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите)
- width: 60px; — блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
>
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 0 8px 16px;
text-decoration: none;
>
/* Change the link color on hover */
li a:hover background-color: #555;
color: white;
>
Активный / Текущая навигация Ссылка
Добавить «активный» класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:
пример
.active <
background-color: #4CAF50;
color: white;
>
Центр Ссылки & Добавить границы
-
добавить рамку вокруг навигационной панели. Если вы также хотите границы внутри навигационной панели, добавить border-bottom для всех
элементов, за исключением последнего:
пример
li text-align: center;
border-bottom: 1px solid #555;
>
li:last-child border-bottom: none;
>
Полноразмерные Фиксировать вертикально Navbar
Создание полной высоты, «sticky» боковой навигации:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
>
Примечание: Этот пример может не работать должным образом на мобильных устройствах.
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающихэлементов списка.
Встроенные элементы списка
пример
li <
display: inline;
>
- display: inline; — По умолчанию
- элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающий элементов списка
пример
a display: block;
padding: 8px;
background-color: #dddddd;
>
- float: left; — использование с плавающей точкой , чтобы получить блок элементов , чтобы скользить рядом друг с другом
- display: block; — Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
- padding: 8px; — Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть
- background-color: #dddddd; — добавить серый цвет фона для каждого элемента
пример
ul <
background-color: #dddddd;
>
Горизонтальная панель навигации Примеры
Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
>
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» класс к текущей ссылке , чтобы пользователь мог знать , на какой странице он / она находится на:
пример
.active <
background-color: #4CAF50;
>
Щелкните правой кнопкой Align ссылки
Right выравнивать ссылки плавучим пункты списка вправо ( с float:right; ):
пример
Пограничные делители
пример
/* 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%;
>
Фиксированный Bottom
ul <
position: fixed;
bottom: 0;
width: 100%;
>
Примечание: Эти примеры могут не работать должным образом на мобильных устройствах.
Серый Горизонтальный Navbar
Пример серой горизонтальной панели навигации с тонкой серой границей:
пример
ul <
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
>
Еще примеры
Отзывчивый Topnav
Как использовать CSS3 медиа запросов для создания гибкой верхней панели навигации.
Отзывчивый Sidenav
Как использовать CSS3 медиа запросов для создания гибкой боковой навигации.
Выпадающее Navbar
Как добавить выпадающее меню в панели навигации.