Создать выпадающие меню с помощью CSS? Запросто. Для этого не требуется множество яваскриптов. Главное здесь грамотно использовать несложные правила CSS, и вы получите меню, которое будет работать даже в браузере Internet Explorer.
Создадим меню
Во-первых следует построить структуру меню. Для этих целей подойдет ненумерованный список. В нем мы создадим элементы. А внутрь этих элементов добавим дополнительные списки подменю.
Вот как это выглядит:
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Пункт 1</a>
<ul>
<li><a href="#">Подпункт 11</a></li>
<li><a href="#"> Подпункт 12</a></li>
<li><a href="#"> Подпункт 13</a></li>
</ul>
</li>
<li><a href="#">Пункт 2</a>
<ul>
<li><a href="#"> Подпункт 21<a></li>
<li><a href="#"> Подпункт 22</a></li>
<li><a href="#"> Подпункт 23</a></li>
<li><a href="#"> Подпункт 24</a></li>
<li><a href="#"> Подпункт 25</a></li>
</ul>
</li>
<li><a href="#">Пункт 3</a>
<ul>
<li><a href="#"> Подпункт 31</a></li>
<li><a href="#"> Подпункт 32</a></li>
<li><a href="#"> Подпункт 33</a></li>
<li><a href="#"> Подпункт 34</a></li>
</ul>
</li>
</ul>
Легкий и понятный HTML код. Ничего лишнего.
Оформляем меню
Пойдем по порядку. И первым на очереди у нас список. Зададим желаемую ширину пунктов меню. Уберем маркеры и отступы.
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
Переходим к определению положения элементов списка. По умолчанию располагаются они вертикально. Нам остается только задать значение для позиционирования position. И выберем мы относительное relative. Это сделано для тог, чтобы затем относительно них абсолютно позиционировать пункты подменю.
ul li {
position: relative;
}
Мы использовали синтаксис написания наследующих селекторов. При этом происходит простое перечисление элементов. Учитывается лишь их иерархия в теле документа. Подробнее о типах селекторов можно прочитать здесь.
Переходим к подменю.
Наша задача сделать так, чтобы пункты подменю появлялись рядом с родительским элементом. Причем делать это они должны только тогда, когда на них наводится курсор.
li ul { position: absolute; left: 199px; top: 0; display: none; }
Позиционирование у нас, как уже упоминалось выше – абсолютное. А используя атрибуты «left» и «top», мы можем указать место вывода наших подменю.
Позже мы добавим границу шириной 1 пиксель к пунктам обоих меню. И если не сдвинуть блок подменю на 1 пиксель влево (т.е. на ширину границы), то при его появлении будут видны сразу обе границы, что не есть красиво.
Атрибуту «display» мы присвоили значение «none». Это сделано для того, чтобы его не было видно, пока не наведен курсор.
Зададим стиль нашим ссылкам.
Не забывайте о порядке перечисления элементов.
ul li a {
display: block;
text-decoration: none;
color: # 990000;
background: #fff;
padding: 10px;
border: 1px solid #000;
border-bottom: 0;
}
Как вы понимаете внешний вид ссылок зависит от вашего вкуса и задач, которые вы преследуете. Поэтому можете выбрать свой вид оформления. В любом случае этот урок не преследует дизайнерских задач. У него более прозаичные цели.
Тут важно не забыть про атрибут «display» и присвоить ему значение «block». Это позволит нашим ссылкам занять все отведенное им пространство внутри содержащего ее элемента.
Вы могли и не заметить, что мы убрали нижнюю границу в свойствах для ссылок. Это сделано с целью избежать наложения нижней границы одного элемента на верхнюю границу следующего за ним. Но в итоге снизу у нас остался открытым наш список. Поэтому давайте добавим ему нижнюю границу. Полный список стилей для элемента ul смотри ниже.
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
Пусть оно заработает
Все у нас готово, осталось только заставить работать наше подменю. Делается это добавлением всего одной строки.
Посмотреть результат можно здесь.
Небольшое дополнение.
В браузере Internet Explorer версии 6 и ниже псевдокласс hover работает только для ссылок.
Решить эту беду можно коротким яваскриптом. Предварительно списку (ul) необходимо присвоить селектор, в данном примере id="menu" и добавить сам скрипт.
<script type="text/javascript">
navHover = function() {
var lis = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
</script>
