Сегодня вертикальное выпадающее меню на css сделать не проблема и я покажу вам сегодня как это делается, абсолютно без скриптов.
Не проблема то не проблема, только я вот сегодня неожиданно понял, что забыл, как это делается Чето давно просто не делал. Ну да ладно, просмотром одного урока я полностью исправил эту проблему, так что поделюсь с вами максимально подробно тем, как все это реализовать. Кстати, если вы хотите узнать, как делается обычное вертикальное меню (красивое ), то смотрите эту статью.
Полная разметка
Я решил, что в нашем вертикальном меню будет четыре пункта. При наведении на каждый пункт будет появляться выпадающее подменю из трех подпунктов. Идея моя вам понятна? Из-за этого разметка получилась слегка громоздкой, вот она:
<nav id = "nav">
<ul class = "main-ul">
<li><a href = "#">Пункт 1</a>
<ul class = "second-ul">
<li><a href = "#">Подпункт</a></li>
<li><a href = "#">Подпункт</a></li>
<li><a href = "#">Подпункт</a></li>
</ul>
</li>
<li><a href = "#">Пункт 2</a>
<ul class = "second-ul">
<li><a href = "#">Подпункт4</a></li>
<li><a href = "#">Подпункт4</a></li>
<li><a href = "#">Подпункт4</a></li>
</ul>
</li>
<li><a href = "#">Пункт 3</a>
<ul class = "second-ul">
<li><a href = "#">Подпункт7</a></li>
<li><a href = "#">Подпункт7</a></li>
<li><a href = "#">Подпункт7</a></li>
</ul>
</li>
<li><a href = "#">Пункт 4</a>
<ul class = "second-ul">
<li><a href = "#">Подпункт8</a></li>
<li><a href = "#">Подпункт8</a></li>
<li><a href = "#">Подпункт8</a></li>
</ul>
</li>
</ul>
</nav>
В принципе тут все очень просто. Все меню лежит в контейнере nav, там уже мы создаем список и его пункты. Но поскольку наше меню двухуровневое, то в каждый пункт списка (li) мы дополнительно вкладываем список с классом second-ul (типа вложенный ul). Название класса роли не играет. И так делаем с каждым пунктом. Если вы внимательно изучите разметку на примере одного пункта, то все поймете, вот еще раз:
<li><a href = "#">Пункт 1</a>
<ul class = "second-ul">
<li><a href = "#">Подпункт</a></li>
<li><a href = "#">Подпункт</a></li>
<li><a href = "#">Подпункт</a></li>
</ul>
</li>
То есть мы в пункт вкладываем список, в котором в свою очередь располагаются вложенные пункты. На этом с html-разметкой все, переходим в css, где все гораздо интереснее.
Оформление нашего меню
Я сделаю некоторые базовые настройки. В частности, нужно убрать маркер у пунктов меню, задать его высоту. Также дополнительно я сброшу отступы у всех элементов. Вы можете этого не делать, это по желанию, просто помните, что по умолчанию у вложенного списка будет отступ.
*{
margin: 0;
padding: 0;
}
#nav{
height: 70px;
}
#nav ul{
list-style: none;
}
Вот такие правила первым делом отправляются в таблицу стилей. Посмотрим, как выглядит наше меню:
Ужасно, не так ли? Но ничего, сейчас мы это исправим!
Следующие стилевые правила очень важны именно с эстетической точки зрения — наше меню станет гораздо красивее на вид. Вот все эти правила:
#nav > ul > li{
width: 180px;
position: relative;
}
#nav li a{
display: block;
background: #ccc;
border: 1px solid #333;
color: #fff;
padding: 15px;
}
#nav li a:hover{
background: #999;
}
Что я здесь настроил? Во-первых, для пунктов главного списка указал ширину и относительное позиционирование. Оно нужно для того, чтобы потом выполнить абсолютное позиционирование вложенного меню. Далее настраиваем сам внешний вид ссылок. Делаем их блочными, красим в нужный цвет, добавляем отступы, рамку и т.д. По желанию. Также сделаем изменение фонового цвета при наведении. Итог всех этих манипуляций:
Я обрезал скриншот. Если же вы все делаете за мной, то у вас будут в ряд располагаться все пункты и подпункты. Все, теперь внешний вид не вызывает отвращения, можно сосредоточиться на том, чтобы сделать меню выпадающим!
Делаем вертикальное меню выпадающим
Пока у нас все вложенные меню видно. Это неправильно, по умолчанию их не должно быть на странице, а появляться они должны только при наведении. То есть при наведении на конкретный пункт должно появляться меню только для него. Суть ясна?
Для начала мы скроем все наши вложенные меню, но перед этим их нужно позиционировать, чтобы они располагались не под основным пунктом, а слева от него. Для этого напишем вот что:
#nav li .second-ul{
display: block;
position: absolute;
left: 100%;
top: 0;
}
То есть для вложенного списка указываем абсолютное позиционирование и сдвиг влево на 100% ширины от ширины родительского блока (пункта списка). А насколько мы знаем, ширина у него 180 пикселей. По высоте вложенное меню должно быть на одном уровне. После этих манипуляций у вас должно получится так:
Ну и собственно теперь замените в стилях для вложенных списков display: block на display: none. После этого подменю пропадут с экрана, что нам и нужно. Мы подходим к самому важному этапу — реализации выпадания на css. Для этого сделаем вот что:
#nav li:hover .second-ul{
display: block;
}
Все очень просто, этой строки вам хватит! Тут мы по сути говорим браузеру: при наведении на пункт главного списка делай видимым вложенный список!
Проверяем. Понаводите на каждый пункт и убедитесь, что для каждого пункта выводиться его, уникальное подменю. Вот так это выглядит:
И так будет для каждого пункта. Если вы все делали за мной, то именно так и будет. Правда я еще добавил ширину для вложенных пунктов списка, чтобы они были такими же по размеру, как основные:
#nav li li{
width: 180px;
}
Ну а дальше вы уже по своему усмотрению можете изменять внешний вид всего этого меню, добавлять новые пункты и т.д. Все это уже очень просто делать, когда знаешь технологию. А технологию я вам показал. Если у вас есть какие-либо вопросы, то можете писать их в комментарии, я же на этом заканчиваю статью.