Выпадающее меню на CSS

2008-02-15 / Рубрика: CSS

Сегодня я расскажу как сделать 4-уровневое меню, вертикальное или горизонтальное. В Opera и FireFox меню работает на CSS (без JavaScript). Internet Explorer требует небольшой кусочек кода JavaSсript .

HTML

Код меню сделаем по стандартам: никаких таблиц и прочего зла — оформим неупорядоченным списком. Далее в CSS и JavaScript будут использоваться имена navmenu-h (для горизонтального меню) и navmenu-v (для вертикального меню).

<ul id="navmenu-h"> 
 <li> <a href="#">корневой элемент </li> 
 <li>
  <ul> 
   <li> <a href="#">дочернийэлемент </a></li>
  </ul> 
 </li> 
</ul>

CSS

Это самая сложная часть всей техники. Чтобы не приводить весь код в статье, выкладываю ссылки:

JavaScript

Из-за того, что Internet Explorer 6 плохо поддерживает CSS, придётся специально для него сделать небольшой код JavaSript. Код нужен не для того, чтобы непосредственно отображать или скрывать HTML-элементы, из которых состоит меню: JavaScript будет нужен для эмуляции поддержки псевдоклассов.

navHover = function() {
 var lis = document.getElementById("navmenu-h").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);