2005 © iNetEssentials

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

Делаем выпадающее меню средствами css.

С чего начать?

1. Для начала строим наше будущее меню:
   
   <ul>
   <li><a href="#">Меню 1</a></li>
   <li><a href="#">Меню 2</a>
   <ul>
   <li><a href="#">Подменю 1</a></li>
   <li><a href="#">Подменю 2</a></li>
   </ul>
   </li>
   <li><a href="#">Меню 3</a>
   <ul>
   <li><a href="#">Подменю 1</a></li>
   <li><a href="#">Подменю 2</a></li>
   </ul>
   </li>
   </ul>
   
   
2. Ставим правила на ul и li
   
   ul {margin: 0;padding: 0;list-style: none;width: 150px;}
   
   width: 150px - ширина поля меню
   
   ul li {position: relative;}
   li ul {position: absolute;left: 149px;top: 0;display: none;}
   
   Добавляем еще кое что - правила для меню:
   
   ul li a {display:block;text-decoration:none;color:#777;background:#fff;padding:5px;border:1px solid #ccc;border-bottom:0;}
   
   Дописываем правила поведения для IE
   
   * html ul li {float: left; height: 1%;}
   * html ul li a {height: 1%;}
   
   Правило для блока ul
   
   ul {margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #ccc;}
   
   Прописываем еще одно правило для li
   
   li:hover ul {display: block;}
   
   
3. Пишем небольшой скрипт:
   

   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;
   

4. Дополнительные правила для списков с наследованием:
   
   li:hover ul, li.over ul {display: block;}
   
   
5. В заключении ставим на наш блок ul:
   
   <ul id="nav">
   
   
6. Готово