Последнее обновление: 27.04.2016
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации - это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент . Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
После установки свойства 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 в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
Панель навигации в основном список ссылок, так что с помощью
-
и
-
элементы имеет смысл:
пример
- Home
- News
- Contact
- About
Теперь давайте уберем пули и поля и отступы из списка:
Объяснение примера:
- list-style-type: none; - Удаляет пули. Панель навигации не нужен список маркеров
- Установить margin: 0; и padding: 0; для удаления настроек браузера по умолчанию
Код в приведенном выше примере стандартный код используется в обоих вертикальных и горизонтальных панелей навигации.
Вертикальная панель навигации
Чтобы построить вертикальную панель навигации, вы можете стиль элементов внутри списка, в дополнение к указанному выше коду:
Объяснение примера:
- display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите)
- width: 60px; - блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей
Вы также можете установить ширину
-
и снимите ширину
, так как они будут занимать всю доступную ширину, когда отображаются в виде блочных элементов. Это приведет к тому же результату, как и в предыдущем примере:
-
или
к центру ссылки.
Добавьте border свойство
-
добавить рамку вокруг навигационной панели. Если вы также хотите границы внутри навигационной панели, добавить border-bottom для всех
-
элементов, за исключением последнего:
Полноразмерные Фиксировать вертикально 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 */
}Примечание: Этот пример может не работать должным образом на мобильных устройствах.
Горизонтальная панель навигации
Есть два способа создания горизонтальной панели навигации. Использованиевстроенных или плавающих элементов списка.
Встроенные элементы списка
Один из способов создания горизонтальной панели навигации, чтобы указать
-
элементы как встроенные, в дополнение к "standard"
коду выше:
Объяснение примера:
- display: inline; - По умолчанию
- элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающий элементов списка
Другой способ создания горизонтальной панели навигации, чтобы плавать на
-
элементов, а также указать макет для навигационных ссылок:
Объяснение примера:
- float: left; - использование с плавающей точкой, чтобы получить блок элементов, чтобы скользить рядом друг с другом
- display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
- padding: 8px; - Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть
- background-color: #dddddd; - добавить серый цвет фона для каждого элемента
Совет: добавьте цвет фона для
-
вместо каждого
элемента, если вы хотите полноширинные цвет фона:
- содержится одна ссылка . В HTML5 для навигации ввели отдельный тег
Горизонтальная панель навигации Примеры
Создание базовой горизонтальной панели навигации с темным цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
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" класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:
Щелкните правой кнопкой Align ссылки
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка
- , где в каждом пункте
-
элементов, за исключением последнего:
Вертикальная панель навигации Примеры
Создание базовой вертикальной панели навигации с серым цветом фона и изменить цвет фона ссылки, когда пользователь перемещает курсор мыши над ними:
пример
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;
}Центр Ссылки & Добавить границы
Добавить text-align:center для
