Навигационная панель в CSS
Навигационная панель в CSS
| |
 Тематические порталы
|
В предыдущих статьях о CSS были рассмотрены базовые возможности вёрстки отдельных элементов страницы, таких как фон, размер блоков, отступы и так далее. Теперь можно применять CSS для создания более сложных элементов, например как создание и оформление навигационной панели для сайта или приложения. При помощи вёрстки можно придать навигационной панели сайта любую форму, цвет, размер, сделать её удобной для использования.
Все вопросы, комментарии по теме материала можно оставлять на странице обсуждения.
Подготовка навигационой панели
Сама панель может быть создана, как обычный список в HTML:
<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>
Панель навигации – это в основном список ссылок, поэтому необходимо использовать элементы <ul> и <li>, так как к ним будут в дальнейшем применяться CSS настройки.
CSS настройки навигационой панели
После этого мы можем задавать параметры вёрстки к данному списку, после чего он будет выглядеть как полноценная навигационная таблица. Затем будет возможность настроить общий вид навигационной панели, превратить его в горизонтальное или вертикальное меню.
CSS настройки вертикального меню
Для вертикального меню мы прописываем следующую CSS конфигурацию:
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 {
background-color: #555;
color: white;
}
И так, сначала делаем общие настройки:
- к элементу <ul> (элемент списка), задаём параметр:
list-style-type: none;- таким образом скрываем формат списка, далее задаём ширину в 200 пикселей:width: 200px;и определяем цвет фона:background-color: #f1f1f1;.
- к каждой строке списка <li> задаём параметр
display: block;– отображает ссылки в виде блочных элементов делает доступным для просмотра всю область ссылок (а не только текст) и позволяет указать ширину (и отступы, поля, высоту и т. д.). - к ссылкам в каждом элементе при наведении курсора задаём параметры цвета фона и шрифта.
Результат таких настроек показан на картинке справа (рис. 1). Серый цвет кнопки получается при наведении курсора мыши.
Дополнительные настройки
Настройка активной кнопки
Иногда бывает необходимость выделить какую-либо кнопку, например сделать её активной на той иной странице сайта. Для этого необходимо определить сначала такую кнопку, задав ему в HTML специальный класс:
<ul>
<li><a class="active" 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>
А затем соответсвующий параметр CSS к нашему списку и исключение, чтобы при наведении на кнопку активной копки не менялся фон:
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
И получаем результат, как показано нас картинке справа (рис.2) вместе с активной кнопкой.
И таким же образом можно настроить другие элементы нашей панели:
- Добавьте
text-align: center;к списку <li> или ссылкам <a>, чтобы центрировать названия кнопок. - Добавьте свойства к граница
border: 1px solid #555;ко всему списку <ul>, чтобы добавить границы вокруг кнопок. Если также нужны границы внутри навигационной панели, добавьте нижнюю границу ко всем элементам <li>, кроме последнего.
Настройка фиксации меню
Можно сделать так, чтобы меню всегда оставалась в верхней части экрана во время прокрутки страницы. Для этого необходимо применить ко всему списку следующие настройки:
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
body {margin: 0;}- убираем отступы на всей страницеposition: fixed;- фиксируем меню и задаём ему нужные параметрыheight: 100%;- задаём высоту страницы по всей её высоте.
CSS настройки горизонтального меню
Для горизонтального меню мы используем такую же структуру, как для вертикальной навигационной панели, но прописываем немного другие параметры:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Настройки при наведении курсора на кнопку */
li a:hover {
background-color: #555;
color: white;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
Отметим некоторые добавления в выше предоставленном примере:
- Отметим, что данное горизонтальное меню отображается с активной кнопкой, её можно убрать по желанию, убрав присвоенный ей класс.
- Сделали границы между кнопками, добавив к элементу списка <li>:
border-right: 1px solid #bbb;. Пример, как выглядит меню смотрите выше (Рис.3)
Дополнительные настройки
Позиционирование кнопок
В горизонтальном меню есть возможность изменить позиционирование кнопок, то есть расположить некоторые кнопки справой стороны меню:
<ul>
<li><a href="index.html">Главная страница</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="contact.html">Контакты</a></li>
<li style="float:right"><a class="active" href="about.html">О нас</></li>
</ul>
- Как видите одной кнопке сделали небольшое дополнение в HTML коде нашего меню
<li style="float: right">, что расположит кнопку "О нас" справа. <a class="active">- выделяет кнопку другим цветом, как это было обозначено выше.
Настройка фиксации меню
Также как и вертикальное меню, горизонтальную навигационную панель можно зафиксировать в верхней части экрана так, чтобы при прокрутки страницы меню не скрывалось. Для этого необходимо дополнить наш CSS следующими параметрами к списку <ul>:
ul {
position: fixed;
top: 0;
width: 100%;
}
После этого наша навигационная панель всегда будет в верхней части страницы.
Примечание
В этой статье мы разобрали пример навигационной страницы, разработка которой включает в себя многие настройки CSS, которые могут применяться в другим элементам на странице. Готовый пример меню можно скачать по следующим ссылкам:
Все вопросы, комментарии, сообщения по тебе данной статьи можно оставить на странице обсуждения.
