Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Выпадающие меню средствами CSS

Выпадающие меню средствами CSS

Красивое выпадающее меню без скриптов - возможно ли такое? Сегодня на этот вопрос можно ответить утвердительно - "голый" html и таблицы стилей CSS помогут вам создать то, для чего совсем недавно использовались громоздские java-скрипты. Давайте сразу посмотрим на готовый результат. Если вам необходимо установить на своем сайте быстро работающее, легко настраиваемое кроссброузерное меню, эта статья вполне может сойти за руководство к действию.

Начнем с заготовки. Ничего сверхестественного - обычный ненумерованный список, имеющий в своей структуре вложенные списки.
<ul>
<li><a href="http://webamator.ru">Индекс</a></li>
<li><a href="http://webamator.ru">Меню_1</a>
<ul>
<li><a href="http://webamator.ru">Подменю_1_1</a></li>
<li><a href="http://webamator.ru">Подменю_2_1</a></li>
<li><a href="http://webamator.ru">Подменю_3_1</a></li>
</ul>
</li>
<li><a href="http://webamator.ru">Меню_2</a>
<ul>
<li><a href="http://webamator.ru">Подменю_1_2</a></li>
<li><a href="http://webamator.ru">Подменю_2_2</a></li>
<li><a href="http://webamator.ru">Подменю_3_2</a></li>
<li><a href="http://webamator.ru">Подменю_4_2</a></li>
<li><a href="http://webamator.ru">Подменю_5_2</a></li>
</ul>
</li>
<li><a href="http://webamator.ru">Меню_3</a>
<ul>
<li><a href="http://webamator.ru">Подменю_1_3</a></li>
<li><a href="http://webamator.ru">Подменю_2_3</a></li>
<li><a href="http://webamator.ru">Подменю_3_3</a></li>
<li><a href="http://webamator.ru">Подменю_4_3</a></li>
</ul>
</li>
</ul>
Давайте посмотрим, что у нас получилось. Не очень похоже на меню, не так ли? Давайте попробуем немного пошаманить - создадим файл style.css:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #000;
}
/* Общие правила для списка, вы можете изменить их по своему вкусу */
ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
/* правила для пунктов списка, обязательно указываем display: block;*/
ul li a {
display: block;
text-decoration: none;
color: #000;
background: #eee;
padding: 3px;
border: 1px solid #000;
border-bottom: 0;
}
и подключим его в файле html:
<link rel="stylesheet" type="text/css" href="styles.css">
В итоге получилось симпатичное меню, но оно вовсе не выпадающее...
Добавим в styles.css правило
li:hover ul, li.over ul { 
display: block;
}
и снова смотрим на результат. Для пользователей IE 5 и IE 6 ничего не изменилось, а всех остальных (включая пользователей IE 7) можно поздравить - в ваших броузерах данное меню отображается вполне корректно. Если в ваши планы не входит поддержка устаревших броузеров, дальше можно не читать и использовать то, что есть - выпадающее меню без единой строчки java-script кода.
Если хочется сделать полностью кроссброузерное меню, придется добавить небольшой java-script:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
в html укажем путь к нему:
<script type="text/javascript" src="menu.js"></script>
и укажем идентефикаторы списков
<ul id="nav">
а в CSS допишем еще одно правило:
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }

И вот он, окончательный результат.

Автор Ник Ригби (Nick Rigby).
Оригинал здесь (на английском).

Категория: CSS
Опубликовано: 9 января 2008, Обновлено: 19.01.2013 - 20:06 просмотров: 2222
 (Голосов: 3)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.36 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.