CSS-панель навигации
Vertical
Horizontal
панель навигации
Умелое использование панели навигации очень важно для любого веб-сайта.
С помощью CSS вы можете превратить её в привлекательную панель навигации вместо скучного HTML-меню.
Панель навигации = список ссылок
Будучи стандартной основой HTML, панель навигации необходима.
В нашем примере мы создадим стандартную панель навигации в виде HTML-списка.
Панель навигации по сути является списком ссылок, поэтому использование элементов <ul> и <li> вполне логично:
Пример
Попробуйте сами »
Теперь давайте уберём внешние и внутренние отступы у списка:
Анализ примера:
- list-style-type:none — удаляет маркеры перед элементами списка. Панели навигации не нужны маркеры списка.
- Удалите настройки браузера по умолчанию и установите margin и padding в 0.
Код в примере выше — это стандартный код, используемый как для вертикальных, так и для горизонтальных панелей навигации.
Вертикальная панель навигации
С помощью приведённого выше кода нам нужно только стилизовать элемент <a>, чтобы построить вертикальную панель навигации:
Пояснение к примеру:
- display:block — отображает ссылку как блочный элемент, делая всю область кликабельной областью ссылки (а не только текстом), и позволяет задать ширину.
- width:60px — По умолчанию блочные элементы занимают максимальную ширину. Мы хотим задать ширину 60 пикселей.
Совет:ПосмотретьПример полностью оформленной вертикальной панели навигации。
Примечание:Обязательно указывайте ширину элемента <a> в вертикальной панели навигации. Если ширина не указана, IE6 может выдать неожиданные результаты.
Пример вертикальной панели навигации
Создайте простой пример вертикальной панели навигации и измените цвет фона при наведении мыши на пункт:
Пример
Попробуйте сами »
Пример активной/текущей панели навигации
После нажатия на вариант мы можем добавить класс "active", чтобы указать, какой вариант выбран:
Создайте ссылки и добавьте границы
Можно добавить к <li> или <a>text-align:centerСтиль для центрирования ссылок.
Вы можетеborderДобавить к <ul>borderИспользуйте свойство, чтобы задать границу для панели навигации. Если вы хотите добавить границу к каждому варианту, вы можете добавить её к каждому элементу <li>.border-bottom :
Пример
Попробуйте сами »
Фиксированная панель навигации на всю высоту экрана
Далее мы создаём фиксированную панель навигации на всю высоту экрана слева, а справа — содержимое с прокруткой.
Пример
Попробуйте сами »
Примечание:Этот пример можно использовать на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. ИспользуйтеInlineилиFloatдля элементов списка.
Оба метода хороши, но если вы хотите, чтобы ссылки имели одинаковый размер, необходимо использовать метод float.
Элементы списка Inline
Один из способов создать горизонтальную панель навигации — указать элементы как inline; приведённый ниже код является стандартным вариантом с inline:
Разбор примера:
- display:inline; — по умолчанию<li>Элемент <li> является блочным элементом. Здесь мы убираем переносы строк до и после каждого элемента списка, чтобы отобразить их в одну строку.
Совет:ПросмотретьПример полностью стилизованной горизонтальной панели навигации。
Плавающие элементы списка
В примере выше ссылки имеют разную ширину.
Чтобы все ссылки имели одинаковую ширину, задайте обтекание для элементов <li> и укажите ширину элементов <a>:
Разбор примера:
- float:left - Используйте float, чтобы блочные элементы располагались рядом друг с другом.
- display:block — отображает ссылку как блочный элемент, делая всю область кликабельной областью ссылки (а не только текстом), и позволяет задать ширину.
- width:60px — По умолчанию блочные элементы занимают максимальную ширину. Мы хотим задать ширину 60 пикселей.
Совет:ПросмотретьПример полностью стилизованной горизонтальной панели навигации。
Пример горизонтальной панели навигации
Создайте горизонтальную панель навигации и изменяйте цвет фона при наведении мыши на пункт.
Пример
Попробуйте сами »
Пример активной/текущей панели навигации
После нажатия на вариант мы можем добавить класс "active", чтобы указать, какой вариант выбран:
Ссылки, выровненные по правому краю
Установите для самого правого пункта панели навигации выравнивание по правому краю (float:right;):
Пример
Попробуйте сами »
Добавьте разделители
через <li>border-rightСтиль для добавления разделительных линий:
Пример
Попробуйте сами »
Фиксированная панель навигации
Вы можете закрепить панель навигации страницы вверху или внизу:
Примечание:Этот пример можно использовать на мобильных устройствах.
Серая горизонтальная панель навигации
Серая горизонтальная панель навигации
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color: #666;
}
Попробуйте сами »
Другие примеры
Адаптивная верхняя навигация — Как использовать медиазапросы CSS3 для создания адаптивной навигации.
Адаптивная боковая навигация — Как использовать медиазапросы CSS3 для создания боковой навигации.
Выпадающее меню навигации — Настройка выпадающего меню внутри панели навигации.
Иконки навигации — используйте иконки в качестве опций панели навигации
Другие расширения
Серая горизонтальная панель навигации
Попробуйте сами »
Адаптивная верхняя навигация — Как использовать медиазапросы CSS3 для создания адаптивной навигации.
Адаптивная боковая навигация — Как использовать медиазапросы CSS3 для создания боковой навигации.
Выпадающее меню навигации — Настройка выпадающего меню внутри панели навигации.
Иконки навигации — используйте иконки в качестве опций панели навигации