Как сделать выпадающий список меню
Как сделать меню вы уже знаете. Сегодня же на примере горизонтального меню я расскажу, как можно сделать выпадающее меню или список.
Помните мы с вами говорили, что меню делает с помощью ненумерованного списка. Так вот, создание выпадающего меню делается также с помощью списка, только он будет у нас вложенным. Добавим его к нашему примеру:
<nav>
<ul>
<li><a href="#">Категории</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Joomla</a></li>
</ul>
</li>
<li><a href="#">Новости</a></li>
<li><a href="#">Конкурсы</a></li>
<li><a href="#">Архив сайта</a></li>
</ul>
</nav>
Как видите из примера мы вложили ещё один список в один из пунктов горизонтального меню. Но если я оставлю всё в таком виде, то список с самого начала будет виден, а нам этого вовсе не надо. Для этого пропишем в стилях такую строчку:
li ul { display:none;}
Теперь мы сделали наш список невидимым, а теперь давайте его сделаем видимым при наведении на пункт горизонтального меню, в котором он вложен:
li:hover ul {display:block;}
А теперь пропишем свойства для нашего выпадающего списка:
li ul li{
display:block; /* Определяем вид показа элемента в документе */
float:left; /* Задаём положение пункта меню */
position:relative; /* Определяем новую позицию для пункта выпадающего меню */
right:0.7em; /* Сдвигаем пункт меню влево */
width:100%; /* Ширина пункта меню */
margin:0; /* задаём значение полей вокруг пункта меню */
padding:0.5em; /* Задаём отступы внутри пункта меню */
background:#006666; /* Цвет фона пункта меню */
}
li ul li:hover, li ul li:hover a{
background:#FF9966; /* Цвет фона выпадающего списка меню */
}
В результате у меня получилось вот такое меню: меню с выпадающим списком. Можно добавить небольшую задержку появления списка и пунктов меню и окончательный вид получился таким. Надеюсь Вам, дорогие читатели, было всё понятно что я пытался изложить выше. Конечно можно было сделать наше меню намного лучше, использовав анимацию и тому подобные вещи, но это я предлагаю сделать вам самостоятельно.