Блог о бытие моём

Делал себе небольшую админку, и наткнулся на весьма досадную неприятность. Оказалось, что мое выпадающее меню не работает в ie6. Чтож, опять господа из Мелкософта постарались, но мы хитрее

Итак. Давайте напишем выпадающее меню, которое работает, я надеюсь, в любом браузере (если где-то не пашет, напишите где).

Как ни странно, но чаще всего выпадающее меню делают списками. Вполне разумно. Но если возникнет желание, можно делать и через дивы и через таблицы. Все зависит от вашей фантазии, но мы будем использовать именно списки, как наиболее распространенный вариант. Это маленькое меню поможет нам разобраться.

<ul id="sample_nav">
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a>
<ul>
<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></li>
</ul>
</li>
<li><a href="#">Оплата</a>
<ul>
<li><a href="#">Способы оплаты</a></li>
<li><a href="#">Cтоимость услуг</a></li>
</ul>
</li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">О Нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</li>
</ul>

Теперь, когда у нас есть меню, напишем для него красивый стиль.
#sample_nav, #sample_nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#sample_nav a {
display: block;
width: 150px;
text-align: center;
padding: 15px 0 0 0px;
color: #FFFFFF;
text-decoration: none;
white-space:nowrap;
height: 36px;
}
#sample_nav li {
float: left;
width: 150px;
height: 51px;
white-space: nowrap;
}
#sample_nav li:hover,
#sample_nav li.sfhover {
background: #0583c4;
width: 150px;
height: 51px;
white-space: nowrap;
}
#sample_nav li ul {
position: absolute;
width: 180px;
left: -999em;
background: #f0f0f0;
border: 1px solid #0583c4;
border-top: 0px;
font: 12px Arial, Helvetica, sans-serif;
}
#sample_nav li:hover ul,
#sample_nav li.sfhover ul {
left: auto;
}
#sample_nav li ul a {
white-space: normal;
text-align: left;
color: #000;
height: 10px;
margin: 0;
padding: 0;
width: 160px;
}
#sample_nav li ul li {
width: 160px;
height: 20px;
padding-left: 20px;
}
#sample_nav li ul li:hover,
#sample_nav li ul li.sfhover {
width: 160px;
height: 20px;
padding-left: 20px;
background: #dcdcdc;
}


Обратите внимание, что для реализации “выпадание” меню мы используем не display:none, а left: -999em, там самым скрывая меню далеко за левым краем экрана.

Чтож, все хорошо и красиво, и даже работает. НО! Не работает в ie6 Эксплорер не обрабатывает псевдо класс :hover. Придется схитрить. Посмотрите внимательно, наряду с li:hover мы описываем и li.sfhover, но для его обработки нам понадобится небольшой яваскрипт.

sfHover = function() {
var sfEls = document.getElementById("sample_nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}}}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover. При событии mouseOut класс обнуляется.

И вот теперь, соединив все это воедино, мы получаем красивое меню, которое работает (и в ie6 тоже).