Демо-версия: навигация Барс
Навигация Бары
Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.
С помощью CSS вы можете превратить скучные меню HTML в симпатичных панели навигации.
Панель навигации = Список ссылок
Панель навигации необходим стандартный HTML в качестве базы.
В наших примерах мы будем строить навигационную панель из стандартного списка HTML.
Панель навигации в основном список ссылок, так что с помощью <ul> и <li> элементы имеет смысл:
пример
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Попробуй сам " Теперь давайте уберем пули и поля и отступы из списка:
Объяснение примера:
-
list-style-type: none;- Удаляет пули. Панель навигации не нужен список маркеров - Установить
margin: 0;иpadding: 0;для удаления настроек браузера по умолчанию
Код в приведенном выше примере стандартный код используется в обоих вертикальных и горизонтальных панелей навигации.
Вертикальная панель навигации
Чтобы построить вертикальную панель навигации, вы можете стиль <a> элементов внутри списка, в дополнение к указанному выше коду:
Объяснение примера:
-
display: block;- Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать width (и padding, margin, height и т.д. , если вы хотите) -
width: 60px;- блочные элементы занимают всю доступную ширину по умолчанию. Мы хотим, чтобы задать ширину 60 пикселей
Вы также можете установить ширину <ul> и снимите ширину <a> , так как они будут занимать всю доступную ширину , когда отображаются в виде блочных элементов. Это приведет к тому же результату, как и в предыдущем примере:
пример
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;
} Попробуй сам " Активный / Текущая навигация Ссылка
Добавить "активный" класс к текущей ссылке, чтобы пользователь мог знать, на какой странице он / она находится на:
Центр Ссылки & Добавить границы
Добавить 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;
} Попробуй сам " Полноразмерные Фиксировать вертикально 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> элементы как встроенные, в дополнение к "standard" коду выше:
Объяснение примера:
-
display: inline;- По умолчанию <li> элементы являются блочные элементы. Здесь мы удалить разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающий элементов списка
Другой способ создания горизонтальной панели навигации, чтобы плавать на <li> элементов, а также указать макет для навигационных ссылок:
пример
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Попробуй сам " Объяснение примера:
-
float: left;- использование с плавающей точкой , чтобы получить блок элементов , чтобы скользить рядом друг с другом -
display: block;- Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным ( а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите) -
padding: 8px;- Так как блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, указать некоторое дополнение, чтобы сделать их хорошо выглядеть -
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;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Попробуй сам " Активный / Текущая навигация Ссылка
Добавить "active" класс к текущей ссылке , чтобы пользователь мог знать , на какой странице он / она находится на:
Щелкните правой кнопкой Align ссылки
Right выравнивать ссылки плавучим пункты списка вправо ( с 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;
} Попробуй сам " Фиксированная панель навигации
Сделайте панель навигации во время пребывания в верхней или нижней части страницы, даже когда пользователь прокручивает страницу:
Примечание: Эти примеры могут не работать должным образом на мобильных устройствах.
Серый Горизонтальный Navbar
Пример серой горизонтальной панели навигации с тонкой серой границей:
пример
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Попробуй сам " 
Еще примеры
Отзывчивый Topnav
Как использовать CSS3 медиа запросов для создания гибкой верхней панели навигации.
Отзывчивый Sidenav
Как использовать CSS3 медиа запросов для создания гибкой боковой навигации.
Выпадающее Navbar
Как добавить выпадающее меню в панели навигации.