Выпадающие меню с помощью CSS (Продолжение)
li:hover ul { display: block; }
Вуаля! И вот оно - наше меню - в действии.
"Ё-моё! Работает!" - крикнет кто-то из вас. - "Здорово!"
Хорошо, хорошо, но чёртов IE/Win опять поломал всю красоту - не желает делать то, что ему сказано. Он понимает
псевдокласс :hover лишь для тега <a> - так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.
Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом "»" - Ред.):
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;
Огромное спасибо Патрику Гриффитсу и Дану Уэббу (Patrick Griffiths и Dan Webb), рассказавшими об этом трюке в одной из предыдущих статей ALA - Suckerfish Dropdowns. Спасибо, парни!
Итак, правила для hover таковы:
li:hover ul, li.over ul { display: block; }
Мы также должны дополнительно связать JavaScript с нашим главным списком, добавив это:
<ul id="nav">
Надеюсь, учитывая всё вышерассмотренное, любой из вас сможет увидеть упрощённую версию действующего меню.
Прыжки меню в IE5.01 для Win
Пользователи IE5.01 для Windows заметят, как меню прыгает вокруг при наведении мыши на любой из элементов списка. Проблема легко решается внесением изменений в наш прошлый трюк:
/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */
Таинственный баг шестой версии IE…
Работая над статьёй, я обнаружил странный баг, который, как мне кажется, наблюдается лишь в IE6. Для "li a" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню, то часть ссылок просто исчезнет с экрана ещё до того, как вы сможете кликнуть по ним. Странно! Попробуйте увидеть это сами. Создайте своё меню
Вот и всё! Не противоречащий стандартам метод создания красивых горизонтально выпадающих меню. Всё, что вам надо сделать - добавить несколько ваших стилей для hover, создав своё меню. Дабы дать толчок вашей фантазии, я добавил еще пару штрихов в к меню. Наслаждайтесь!
Данная статья разрешена для публикации только на http://visavi.net/