Создание горизонтального меню с выпадающим списком с помощью HTML и CSS

Ровно три года назад я написал статью о создании меню с выпадающим списком. Для этого были использованы простейшие приемы HTML и CSS. Как оказалось, статья актуальна до сих пор, но у некоторых начинающих веб-дизайнеров возникают трудности с конструированием своего варианта такого меню. Особенно это касается горизонтального меню, один из примеров которого показан на рисунке (пример рабочий, можно потыкать). Чтобы посетитель сайта не гадал, какой из пунктов меню раскрывается, желательно снабдить его указателем. В нашем примере - стрелка у пункта НАШИ УСЛУГИ (код символа ▼). Это особенно актуально для экранов мобильников и планшетов, где нет курсора.

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

Для фона пунктов меню и его изменения при наведении курсора (активная ссылка a:hover) используются два изображения разной яркости: dropmenu_01.png и dropmenu_02.png (показаны справа). Для симметрии по бокам меню оставлены области без ссылок шириной 10 пиксел.

Выпадающий список создан при помощи тегов <ul> <li >... </li ></ul>. Полный HTML-код нашего меню следующий:

<table width="100%"  border="0" align="center"   cellpadding="0" cellspacing="0" >

        <tr >

        <td height="35" width="10" class="drop">&nbsp;</td>

        <td  class="dropmenu"><a href="" title="О нас">ГЛАВНАЯ</a></td>

        <td    class="dropmenu"><ul>

        <li>

        <label>НАШИ УСЛУГИ &#9660;</label>

        <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>

        <li><a href="" >Массаж</a></li>

        </ul>

        </li>

        </ul></td>

        <td  class="dropmenu"><a href="" title="Прайс-лист" >ЦЕНЫ</a></td>

        <td  class="dropmenu"><a href="" title="Акции и скидки" >АКЦИИ</a></td>

        <td  class="dropmenu"><a href="" title="Фотогалерея">ФОТООБЗОР</a> </td>

        <td  class="dropmenu"><a href="" title="Как нас найти">КОНТАКТЫ</a></td>

        <td width="10" class="drop">&nbsp;</td>

        </tr>

        </table>

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

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

<style type="text/css">

<!--

/* Боковые пустые области */

        .drop {

background:url(images/dropmenu_01.png);

background-repeat:repeat-x;

}

/* Параметры пунктов меню без выпадающих списков */

.dropmenu {

background:url(images/dropmenu_01.png);

background-repeat:repeat-x;

}

.dropmenu a {

text-align:center;

display:block;

font-size:12px;

font-weight:bold;

color:#ffff00;

text-decoration: none;

}

.dropmenu a:hover {

color:#ffffff;

text-decoration: none;

}

.dropmenu:hover {

background:url(images/dropmenu_02.png);

background-repeat:repeat-x;

/* Параметры пункта меню с выпадающим списком */

}

.dropmenu ul {

margin: 0px;

padding: 10px 0px;

list-style: none;

text-align:center;

font-size:12px;

font-weight:bold;

color:#ffff00;

}

.dropmenu ul:hover { 

color: #ffffff; 

}

/* Положение выпадающего списка */

.dropmenu ul li {

position: relative;

}

.dropmenu li ul {

position: absolute;

left: 5px;

top: 15px;

display: none;

z-index:10;	/* Определяет положение меню над слайдером */

}

/* Параметры ячеек выпадающего списка */

.dropmenu ul li a {

display: block;

text-decoration: none;

color: #000000;

font-weight:normal;

padding:3px;

width:120px;

height:auto;

background: #ffde87;

border:thin solid #CC6633;

}

.dropmenu ul li a:hover {

display: block;

text-decoration: none;

color: #ffffff;

background: #a58a59;

}

.dropmenu li:hover ul {

display: block;

}

/* Хак для IE7 (см. предыдущую статью) */

.dropmenu *+html ul li {

float: left;

}

.dropmenu *+html ul li {

width: 100%;

}

-->

</style>

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

Если у вас на странице имеется слайд-шоу или другой слайдер, то обратите внимание на значение z-index:10 для выпадающего списка. Чтобы выпадающее меню было над слайдером, то есть не перекрывалось им, это значение для списка должно быть выше, чем у слайдера.

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

Далее рассмотрим, как с помощью JavaScript добавить в созданное меню эффекты анимации. Как всегда, это оказывается очень просто и не требует глубоких знаний в программировании. Последнее обычно больше всего пугает начинающих сайтостроителей.

Веб-дизайн и поисковая оптимизация

Создание меню для сайта

Создание горизонтального меню с выпадающим списком

Далее - Создание простого анимированного меню

Ключевые слова: разработка сайтов, создание выпадающего меню на HTML и CSS, горизонтальное меню с выпадающим списком, раскрывающееся меню, всплывающее меню