Создаем горизонтальное меню

Навигационное меню сайта — это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.

Множество разработчиков создает этот элемент различными способами, но я хотел бы представить Вашему вниманию одну из самых удачных практик.

Меню мы будем строить на элементе — список, который лучше всего подходит для навигации и позволяет строить иерархические структуры меню при необходимости. Ниже представлена стандартная HTML схема меню.

Как видно, структура очень проста и понятна. Для стандарта HTML 4 существует элемент — div, в котором и находится наше меню. Для HTML 5 — мы используем элемент nav. Приведем листинг HTML кода.

Структура для HTML 4

<div id="nav">
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</div>

Структура для HTML 5

<nav>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</nav>

И так у нас есть готовый список, как же теперь из этого получить нам красивое меню? Для это воспользуемся каскадными таблицами стилей и приведем нашу структуру в необходимый вид.

Зададим фиксированную высоту тегу <ul>, например 30 пикселей.

Для тега <li> зададим высоту строки такую же, как и высота самого <ul>, то есть 30 пикселей, это необходимо для того, что бы текст находился по середине.

Как только мы зададим свойство float у элемента <li>, то наше меню из вертикального превратится в горизонтальное, что нам и надо. Стоит заметить, что элементы с установленным свойством float автоматически становятся элементами уровня блока, потом этот блок смещает влево или вправо. Высота у тегов <li> должна быть такая же, как и у <ul>

Для тега <a> устанавливаем свойство display: block, это необходимо для того, что бы элемент занял всю область элемента <li> и вся эта область была «кликабельна».

Теперь можно создать иерархическое меню

<nav>
<ul class="site-navigation">
 <li><a href="#">Главная</a></li>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 <li><a href="#">Страница 5</a>
   <ul>
    <li><a href="#">Страница 5-1</a></li>
    <li><a href="#">Страница 5-2</a></li>
    <li><a href="#">Страница 5-3</a></li>
   </ul>
 </li>
</ul>
</nav>

А теперь используя CSS стилизуем наше меню

ul.site-navigation {
height: 30px;
 /* Зададим фон для списка */
 background-color: #3DA4B7;
}
ul.site-navigation li {
 line-height: 30px;
 height: 30px;
 float:left;
 width:auto;
}
ul.site-navigation li a {
 display: block;
 color: #fff;
 text-decoration:none;
 padding: 0 10px;
 border-right: 1px solid #f4f4f4;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.site-navigation li a:hover {
 background-color: #57BCCC;
}
ul.site-navigation li ul {
 background-color: #3DA4B7;
 display:none;
}

ul.site-navigation li ul li {
 float: none;
}
ul.site-navigation li:hover ul {
 display:block;
}

Вот так, достаточно просто можно сделать удобное и практичное меню для сайта. Рабочий пример можно скачать по этой ссылке. Это довольно таки простой пример, в который затем можно добавить несколько дополнительных элементов функциональности.

Статья подготовлена с использованием материалов сайта http://woorkup.com