HTML5 | Создание панели навигации
Создание панели навигации
Последнее обновление: 27.04.2016
Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.
Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными,
одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации
мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным,
а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.
Вертикальное меню
Распространенное решение данной проблемы для создания вертикального меню состоит в том, чтобы сделать ссылку блочным элементом.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Панель навигации в HTML5</title>
<style>
ul.nav{
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
ul.nav a {
display: block;
width: 7em;
padding:10px;
background-color: #f4f4f4;
border-top: 1px dashed #333;
border-right: 1px dashed #333;
border-left: 5px solid #333;
text-decoration: none;
color: #333;
}
ul.nav li:last-child a {
border-bottom: 1px dashed #333;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О сайте</a></li>
</ul>
</body>
</html>
После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.
Горизонтальное меню
Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов,
которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства
Использование float
Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li, в который заключена
ссылка, устанавливается float: left;. Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка
обтекает левый элемент списка.
Второй этап заключается в установке у элемента ссылки display: block, что дает нам возможность устанавливать ширину, отступы, вообщем все те признаки,
которые характерны для блочных элементов.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Панель навигации в HTML5</title>
<style>
ul.nav{
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
.nav li {
float: left;
}
ul.nav a {
display: block;
width: 5em;
padding:10px;
margin: 0 5px;
background-color: #f4f4f4;
border: 1px dashed #333;
text-decoration: none;
color: #333;
text-align: center;
}
ul.nav a:hover{
background-color: #333;
color: #f4f4f4;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О сайте</a></li>
</ul>
</body>
</html>
inline и inline-block
Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить
для него display: inline. После этого для элемента ссылки, которая располагается в элементе li, мы можем
установить display: inline-block:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Панель навигации в HTML5</title>
<style>
ul.nav{
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
.nav li {
display: inline;
}
ul.nav a {
display: inline-block;
width: 5em;
padding:10px;
background-color: #f4f4f4;
border: 1px dashed #333;
text-decoration: none;
color: #333;
text-align: center;
}
ul.nav a:hover{
background-color: #333;
color: #f4f4f4;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О сайте</a></li>
</ul>
</body>
</html>
metanit.com
Как сделать навигационное меню — учебник CSS
Навигация присутствует на любом хорошем сайте, даже если он одностраничный. В зависимости от ситуации, навигационные ссылки могут вести на различные разделы сайта либо отправлять к закладке (якорю), расположенной на текущей странице. Грамотное составление навигации, в которой не запутается пользователь, требует определенных знаний и опыта. К дизайну навигационной панели также нужно подходить с умом, и в этом уроке мы расскажем вам, как создать удобное навигационное меню.
Создание навигации
Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка <ul>, где в каждом пункте <li> содержится одна ссылка <a>. В HTML5 для навигации ввели отдельный тег <nav>, куда можно просто помещать теги ссылок. После создания HTML-каркаса можно переходить к его стилизации с помощью CSS, где вы можете определять, каким будет ваше меню — вертикальным, горизонтальным, выпадающим и т. п.
Допустим, у нас есть простая навигация с пятью ссылками, созданная в HTML на основе маркированного списка:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> </ul>
Изначально, без стилей наша навигация выглядит, как обычный список:
Чтобы сделать этот элемент более похожим на навигационную панель, необходимо проделать несколько обязательных шагов. Во-первых, возле пунктов меню не нужны маркеры, а во-вторых, стандартные значения margin и padding, заданные браузером для списка, могут мешать, поэтому мы обнуляем их. В итоге получается следующее:
.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
По сути, идентичные действия по отношению к спискам делает файл сброса стилей Reset.css, поэтому, если вы используете его на вашем сайте, то код выше можно не записывать.
После обнуления стандартных стилей списка можно приступать непосредственно к созданию стилей для навигации. Мы покажем, как делать вертикальные и горизонтальные панели.
Вертикальное меню
Создание вертикальной навигационной панели считается более легким занятием, нежели создание горизонтального меню. Главным образом потому, что нет необходимости задавать горизонтальное расположение ссылок. Это просто вертикальный список страниц сайта. И всё же некоторые важные стили применить придется.
Блочные ссылки
Прежде всего нужно сделать все теги <a> блочными элементами:
.menu a { display: block; }
Существует несколько причин для этого:
- Вы сможете задавать отступы для ссылок.
Блочный элемент занимает всю ширину контейнера, тогда как ширина строчного элемента зависит от его содержимого. Из-за этого могут появиться проблемы, если вы, например, решите установить для ссылок фоновый цвет:
GIFСтрочные ссылки могут быть разной длины, что негативно отразится на внешнем виде.
- Исходя из второго пункта, можно отметить еще один положительный момент. Когда ссылка является блочным элементом, область ее кликабельности расширяется: даже если кликнуть по месту, где нет текста, она все равно сработает. Это удобно, потому что не надо прицеливаться по маленькой ссылке. А с помощью вертикальных отступов
Ширина меню
Следующее, что нам понадобится сделать — это задать ширину меню. Если у вас заранее не была определена ширина навигационной панели, и она не находится в контейнере, который ограничивает ее, то меню будет растянуто на всю ширину окна (как в нашем примере выше) — ведь блочный элемент по умолчанию ведет себя именно так. Вы можете задать необходимую ширину для элемента .menu, например:
.menu { width: 300px; }
Вместо этого можно установить ширину для пунктов <li> либо для ссылок <a> — визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента .menu всё равно останется 100%.
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку .menu:
.menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
.menu a {
height: 30px;
line-height: 30px;
}
GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации — расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант — задать пунктам списка свойство display со значением inline либо inline-block:
.menu li {
display: inline;
}
При этом теги <a> внутри <li> нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block. Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
.menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding. Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами <li>. Эти промежутки можно убрать, записав HTML-код списка в одной строке:
<ul> <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Gallery</a></li> ... </ul>
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
.menu li {
margin-right: -5px;
}
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float. Для этого добавьте стиль для тегов <li>:
.menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим, <h2>), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left. Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
.menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента :after. Пример выше — это еще один способ решить вопрос с исчезнувшей высотой контейнера.
GIF
Примечание: если вы установите фон для элемента .menu, то вы не увидите его до тех пор, пока не примените к нему overflow: hidden. Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать стили ссылкам в зависимости от атрибутов и их значений.
idg.net.ua
СSS Панель навигации
Демонстрация: панелей навигации
Горизонтальная
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель авигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации — это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:
Пример
<ul>
<li><a href=»index.php»>Главная</a></li>
<li><a href=»news.php»>Новости</a></li>
<li><a href=»contact.php»>Контакты</a></li>
<li><a href=»about.php»>О Нас</a></li>
</ul>
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример объяснение:
list-style-type: none;— Убирает маркеры. В панели навигации не нужны маркеры для списка- Установить
margin: 0;иpadding: 0;чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере — это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a> в списке, к дополнению коду выше:
Объяснение примера:
display: block;— Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)width: 60px;— Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей
Вы также можете установить ширину <ul> и удалить ширину <a>,
поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока.
Это приведет к тому же результату, что и в предыдущем примере:
Пример
ul {list-style-type: none;
margin: 0;
padding: 0;
width: 70px;
}
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 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Активная и текущая ссылка навигации
Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Центральные ссылки и добавить границы
Добавить выравнивание 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;
}
Фиксированная вертикальная навигация
Создать в полную в высоту, «фиксированную» боковую панель навигации:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Полная высота */
position: fixed; /*
Сделайте его придерживаться, даже на прокрутки */
overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}
Примечание: Этот пример может работать неправильно на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Встроенные элементы списка
Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в «стандартные» в коде выше:
Объяснение примера:
display: inline;— По умолчанию, элементы<li>— это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающие элементы списка
Другой способ создания горизонтальной навигации, плавают элементы <li> им нужно указать расположение для навигационных ссылок:
Пример
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Объяснение примера:
float: left;— Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другомdisplay: block;— Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)padding: 8px;— Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красивоbackground-color: #dddddd;— Добавить серый фон цвета к каждому элементу
Совет: Добавить 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;
}
/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
background-color:
#111;
}
Активная и текущая ссылка навигации
Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Выравнивание списка по правому краю
Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:
Пример
<ul>
<li><a href=»#home»>Главная</a></li>
<li><a href=»#news»>Новости</a></li>
<li><a href=»#contact»>Контакты</a></li>
<li><a
class=»active» href=»#about»>О Нас</a></li>
</ul>
Разделители границ списка
Добавить свойство border-right в <li> для создания разделителей ссылок:
Пример
/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Фиксированные горизонтальные панели навигации
Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:
Фиксированная навигация сверху
ul {
position: fixed;
top: 0;
width: 100%;
}
Фиксированная навигация снизу
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.
Серая горизонтальная панель навигации
Пример серой горизонтальной панели навигации, с тонкой серой границей:
Липкая панель навигации
Использовать position: sticky; в <li>, чтобы создать липкую навигацию.
Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки.
Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране —
тогда он «прилипает» на месте (например, position:fixed).
Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование.
Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для
липкое позиционирование работы.
Еще примеры
Отзывчивая верхняя навигация
Как использовать медиа запросы CSS для создания адаптивной верхней навигации.
Редактор кода »Отзывчивая боковая навигация
Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.
Редактор кода »Выпадающий список навигации
Как добавить выпадающее меню в панели навигации.
Редактор кода »schoolsw3.com
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 6.0+ | 10.6+ | 5.0+ | 4.0+ | 2.1+ | 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
Синтаксис
<nav>ссылки</nav>Атрибуты
Нет.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav</title>
</head>
<body>
<header>
<h2>Чебурашка и крокодил Гена</h2>
</header>
<nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
<a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
<article>
<h3>Добро пожаловать!</h3>
</article>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Навигация по сайту
Браузеры
Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
htmlbook.ru
Навигация для сайта.
Привет, Уважаемые подписчики!
Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.
Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег <h3>…</h3>. В него ставится ссылка.
PSD макет данной вещи для тренировки можно скачать тут.
Так же данный урок доступен в видео версии, которую можно скачать здесь:
Качаем виде версию урока.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНу, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.
<div>
<h3><a href="#">О ЦЕНТРЕ</a></h3>
<h3><a href="#">ФОТОГАЛЕРЕЯ</a></h3>
<h3><a href="#">ПРЕЙСКУРАНТ ЦЕН</a></h3>
<h3><a href="#">КОНТАКТЫ</a></h3>
</div>
Все остальное будем делать с помощью стилей.
Для класса .bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.
Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега <h3> выравнивание текста по центру.
Далее нам нужно вырезать картинки, которые поставим фоном для ссылок.
Вырезаем фон для обычной ссылки:
И для ссылки в наведенном состоянии:
Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.
Для ссылки в стиле опишем фон, шрифт, его размер, цвет текста. Пока на первый взгляд больше ничего не нужно.
.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
}
И что ж мы увидим?
Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:
.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
width:190px;
height:27px;
}
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее По-прежнему ничего не изменилось.
Мы не перевели ссылку из строчного типа в блочный. За это отвечает свойство display со значением block. Добавим это свойство:
.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
width:190px;
height:27px;
display:block;
}
Вроде начинает навигация принимать нужный нам вид:
Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:
.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px; color:#056e04;
font-weight:bold;
width:190px;
height:21px;
display:block;
margin-bottom:10px;
padding-top:6px;
}
Получаем то, что нужно:
Доделываем ссылку в состоянии hover. В общем, копируем код для обычной ссылки и меняем значение фона, цвета текста ссылки и делаем текст не подчеркнутым. Остальное оставляем без изменения:
.bar-menu h3 a:hover{
background:url(images/bg-menu.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#ffffff;
font-weight:bold;
width:190px;
height:21px;
display:block;
margin-bottom:10px;
padding-top:6px;
text-decoration:none;
}
Вот и получилась наше навигационное меню:
Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!
Автор: Андрей Бернацкий.
E-mail:[email protected]
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
Создаем фиксированное навигационное меню | HTML/xHTML
Фиксированное навигационное меню часто называют «липким» меню, потому как его суть, помимо самой навигации, состоит в том, что оно всегда остается в одном положении на странице, независимо от скроллинга пользователя.
Это довольно распространенная практика, когда в шаблонной навигации по сайту используется подобный вариант исполнения меню, да и не только меню.
Строка поиска, кнопки социальных сетей, всевозможные уведомления. Подобный шаблон гарантирует, что наиболее важные элементы сайта будут находиться в легкодоступном месте независимо от того, где именно на странице в данный момент находится посетитель.
В этой статье я покажу вам простой CSS-прием для внедрения в сайт горизонтального «липкого» навигационного меню.
Прежде чем начать, мы взглянем на несколько сайтов, которые уже используют фиксированные навигационные панели, просто для того, чтобы увидеть, как это работает на практике.
Ниже я привожу несколько ссылок.
В Niice используется фиксированная панель навигации, которая содержит в себе окно поиска и меню навигации по сайту. Во время просмотра проектов, вы можете быстро фильтровать их, не прерываясь на перемещение по сайту, используя окно поиска в верхней части экрана:
Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:
Сайт Forbes.com расположил меню, систему поиска по сайту и виджет для авторизации на фиксированной панели навигации, предоставив пользователю, читающему новости удобство быстрого доступа.
Это позволяет пользователям быстро прыгать к следующей статье после прочтения предыдущей. Фиксированная панель навигации увеличивает время нахождения пользователя на сайте, потому как читатели постоянно используют меню для выбора свежих новостей:
И, как хорошо видно из предыдущего примера, навигационная панель существенно повышает юзабилити сайта с множеством разнообразного контента.
Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом (поиск, авторизация, перемещение по структуре). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса:
Теперь, когда мы просмотрели достаточно примеров и осознали преимущества навигации подобного типа, приступим, непосредственно, к повышению эффективности работы нашего онлайн — ресурса.
Ниже демонстрационный пример того, как это выглядит на практике:
ПРОСМОТРЕТЬ ДЕМО
СКАЧАТЬ ИСХОДНИКИ С GITHUB
Перейти к GitHub Repository
Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:
<nav> <!-- Содержимое навигационной панели --> </nav>
Элемент nav отлично подходит в данном случае. Он предоставляет сторонним сервисам (таким, как например роботы поисковых систем) возможность без проблем понимать информационную структуру вашего сайта. Элемент nav по умолчанию является блочным, так что не нужно писать лишнюю строчку CSS-кода.
Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div. Также можно использовать inline-элемент, такой как span, но прописать ему в CSS-коде свойство display: block.
Вот CSS-код, который заставляет нашу навигационную панель фиксироваться в одном месте:
.fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; background-color: #00a087; }Ранее, мы присвоили нашему HTML-элементу класс fixed-nav-bar, поэтому сейчас просто применим к данному селектору нужные стили.
Значения трех последних свойств (width, height и background-color) меняйте на подходящие для вашего сайта.
Давайте теперь рассмотрим подробнее эти четыре волшебных CSS-свойства, ответственных за магию:
Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:
top: 0; left: 0; right: 0;
Устанавливая свойства top, left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.
Подсказка: если нужно разместить панель в «подвале» области просмотра то, нужно просто заменить top: 0 на bottom: 0:
Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML-разметки поверх фиксированной панели навигации (если конечно не появится элемента со значением z-index больше, чем 9999).
На этом, пожалуй, все.
В демо-примере применен довольно устаревший вариант респонсивного, выполненного на CSS, навигационного меню. В этом виде оно является концепцией, но не имеет законченной формы. Так как в этом уроке нашей основной целью стала постройка фиксированной навигационной панели, которая может являться контейнером для любых других элементов страницы, меню я обсуждать не стану.
Исследуйте исходный код, если вам станет интересно, как работает эта часть (если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться).
Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML-разметки и всего несколько CSS-свойств, которые мы с вами рассмотрели.
Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS, и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav (который относится к HTML5) на div.
В нужном контексте фиксированная панель навигации сможет улучшить удобство использования, потому что ее использование уменьшает задержку при переходе к новой задаче, по сравнению с традиционной горизонтальной панелью навигации, которая требует прокрутки обратно к верхней части страницы.
Данная публикация представляет собой перевод статьи «How to Create a Fixed Navigation Bar» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
| Справочник HTML
Элемент <nav> (от англ. «navigation» ‒ «навигация») предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>.
На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <ol>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты тегом <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
Некоторые браузеры, предназначенные для чтения с экрана, могут использовать элемент , чтобы определить, следует ли опускать его содержимое для начального рендеринга.
Примечание: Запрещается вкладывать <nav> внутрь <address>.
Синтаксис
<nav>...</nav>
Закрывающий тег
Обязателен.
Атрибуты
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <nav> со следующими значениями CSS по умолчанию:
nav {
display: block;
}Различия между HTML 4.01 и HTML5
Тег <nav> был добавлен в HTML5.
Пример использования:
Набор ссылок навигации:
Пример HTML:
Попробуй сам<nav>
<a href="http://wm-school.ru/html/">HTML</a> |
<a href="http://wm-school.ru/css/">CSS</a> |
<a href="http://wm-school.ru/js/">JavaScript</a> |
<a href="http://wm-school.ru/jquery/">jQuery</a>
</nav>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <nav> | 9+ | 5+ | 11.10+ | Да | 4.1+ | 4+ |
| Элемент | ||||
| <nav> | 2.2+ | 4+ | 11+ | 5+ |
HTML уроки: HTML Элементы
wm-school.ru