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

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

function anychange (objName) {
   if ( $(objName).css('display') == 'none' ) {
   $(objName).animate({width: 'show'}, 700);
   } else {
   $(objName).animate({width: 'hide'}, 700);
   }
}

При помощи методов Show и Hide задается плавность выпадания блока. Число после скобки влияет на длительность анимации в миллисекундах. Данную функцию мы вызываем при нажатии на ссылку.

<a href="#" onclick="anychange('#divId'); return false">Открыть/Закрыть</a> 

<div id="divId"></div>

Далее перейдем к созданию и размещению меню в нашем выпадающем блоке. Сам блок, это ни что иное как обычный DIV, в нем мы и размещаем нужный нам HTML-код для меню.

Меню написано на CSS, код которого по желанию можно отредактировать, добавив свои визуальные эффекты.

#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}

#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}

#nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;

text-shadow:1px 1px 1px rgba(0,0,0,0.75);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}

#nav li a:hover{
color:#fff;
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}


#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0;
-webkit-transition:0.25s linear opacity;
}

#nav ul li{
padding-top:1px; 
float:none;
background:url(dot.gif);
}

#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ 
left:0; 
opacity:1; 
}
#nav li:hover a{ 
background:#6b0c36;
background:rgba(107,5,54,0.75);
text-decoration:underline;
}

#nav li:hover ul a{ 
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}

#nav li:hover ul li a:hover{
background:#333;
background:rgba(51,51,51,0.75); 
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}

Вот такой вот несложный способ сделать сайт более интерактивным. Кстати, имеются и другие разновидности меню, например: круговое меню на CSS, меню для сайта Superfish, адаптивное меню SlickNav и другие. Благодарю всех за внимание!