Горизонтальное выпадающее меню на CSS



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

Горизонтальное выпадающее меню на CSS


Пример записи кода:

<div id="navMenu"> <ul> <li class="navList1"><a href="#">Главная</a></li> <li class="navList1"><span><a href="#">О сайте</a></span> <ul> <li><a href="#">Домоводство</a></li> <li><a href="#">Кулинария</a></li> <li><a href="#">Советы</a></li> <li><a href="#">Рецепты</a></li> <li><a href="#">Полезное</a></li> </ul> </li> <li class="navList1"><span><a href="#">Статьи</a></span> <ul> <li><a href="#">Ведение хозяйства</a></li> <li><a href="#">Советы по кулинарии</a></li> <li><a href="#">Применение мультиварки</a></li> </ul> </li> <li class="navList1"><span><a href="#">Фотогалерея</a></span></li> <li class="navList1"><span><a href="#">Гостевая</a></span></li> <li><span><a href="#">Контакты</a></span></li> </ul> </div>

Создаем контейнер <div>...</div> с идентификатором id="navMenu". Прописываем пункты со ссылками <a href="#">Главная</a>. Чтобы создать выпадающий эффект создаем неупорядоченный список с вложенными списками.

Каждому элементу списка присваиваем класс navList1. С помощью этого класса, мы создадим разделитель с правой стороны. К разделу Контакты класс не применяем,так как он не требует границы.

Для создания левой границы используем тег span в который заключаем адрес ссылки, кроме первого пункта.
Для блока задаем стили:


#navMenu { float:left;/*Выравниваем элемент по левому краю*/ border:2px solid #849c92; /*оформляем рамку*/ border-radius:10px;/*скругление уголков рамки*/ -moz-border-radius:10px; -webkit-border-radius:10px; background-color: #C7CECB;/*цвет фона элемента*/ background-repeat: no-repeat;/*фоновое изображение в элементе без его повторений,*/ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));/*линейный градиент */ background-image: -webkit-linear-gradient(#FFF, #000); background-image: -moz-linear-gradient(top, #FFF, #000); background-image: -ms-linear-gradient(#FFF, #000); background-image: -o-linear-gradient(#FFF, #000); background-image: linear-gradient(#FFF, #000); -moz-box-shadow: 2px 5px 7px #161617;/*добавляем тень*/ box-shadow: 2px 5px 7px #161617;/*добавляем тень*/ }




Свойства moz-border-radius и -webkit-border-radius задают закругленные углы для разных браузеров.

Добавляем градиент (указан тип градиента, где начинается, где заканчивается, два цвета: для начала и конца градиента.)

Тень задаем с помощью box-shadow (горизонтальное смещение, вертикальное смещение, радиус размытия и значение цвета).







#navMenu ul ul{ display:none;/*временно удаляем элемент из документа*/ } #navMenu ul{ padding:0;/*отменяем поля вокруг элемента*/ margin:0;/*отменяем отступы*/ list-style:none;/*отменяем маркер списка*/ position:relative;/*относительное позиционирование*/ }


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




#navMenu ul li{ display:block;/*элемент блочный*/ float:left;/*смещение влево и обтекание*/ padding-top:9px;/*поля от верхнего края*/ padding-bottom:9px;/*поля от нижнего края*/ } #navMenu ul li span a{ border-left:solid #8cab9e thin;/*разделитель слева*/ }

Свойство display:block, а также float:left; дает смещение каждого пункта меню влево и обтекание. Чтобы пункты меню располагались по центру применены внутренние отступы снизу и сверху.

.navList1 a{ border-right:solid #505e58 thin;/*разделитель справа*/ } #navMenu ul li a{ display:block;/*Элемент показывается как блочный*/ padding:4px;/*Поля*/ padding-left:10px;/*поле слева*/ padding-right:10px;/*поле справа*/ color:#d1d1d1;/*цвет текста*/ text-decoration:none;/*отменити подчеркивание*/ font-family:Tahoma, Geneva, sans-serif;/*семейство шрифта*/ font-size:80%;/*размер шрифта*/ }

Добавлен второй разделитель справа, задан цвет, размер и семейство шрифта.

#navMenu ul li a:hover{ color:#ffffff;/*изменение цвета*/ text-decoration:underline;/*подчеркивание при наведении*/ }

Задаем изменение цвета и подчеркивание шрифта при наведении указателя мыши.

#navMenu ul ul{ position:absolute;/*абсолютное позиционирование*/ top:47px;/*смещение*/ background-color:#D2D2D2;/*фон выпадающего списка*/ width:120px;/*ширина для выпадающего меню*/ border:1px solid #849c92;/*рамка выпадающего списка*/ display:none; } #navMenu ul li:hover ul{ position:absolute;/*абсолютное позиционирование*/ display:block;/*Элемент показывается как блочный*/ }

Применяем абсолютное позиционирование, смещение на 47px, фон выпадающего списка, добавляем рамку, определяем ширину для выпадающего меню,применяем свойство display:block; для обеспечения видимости меню во время перемещения курсора.

#navMenu ul ul li{ padding:0; padding-top:3px;/*отступ от верха*/ padding-bottom:4px;/*отступ от низа*/ } #navMenu ul ul li a{ border:none;/*отменяем рамку вокруг текста*/ color:#5D5D5D;/*цвет шрифта выпадающего списка при наведении*/ }

Делаем отступы, меняем цвет шрифта при наведении, отменяем рамку вокруг текста.

В данном меню применены новые свойства CSS 3. Помните, эти новые свойства поддерживаются только последними версиями Google Chrome, Mozilla Firefox, Safari и Opera.

22.07.2013

Далее рассмотрим: