Продолжаем изучение CSS и сегодня приступим к построению вертикального меню.
Такие меню очень популярны и без них не обходится каждый второй сайт. Статей по созданию подобной навигации написано немало, но меня данный факт волнует мало. Моя задача - разобраться в принципе построения подобного меню и возможность сделать его самому, на коленках за пару минут. В действительности все просто, даже очень просто.
Созданное в этой статье вертикальное меню будет далеко по своим внешним эстетическим данным от совершенства. Но это и неважно - важен сам принцип, механизм построения и функционирования подобной навигации. А всякие фантики-бантики можно навесить всегда, было бы желание.
Механизм действия и построения такого меню основан на одном единственном CSS-свойстве - 1
display
1
display: block
1
display: none
В этой статье будет создаваться простое вертикальное меню, в котором подменю размещается сбоку от основного меню. Существует более сложный вариант вертикального меню, в котором подменю размещается внутри основного.
Такая навигация называется 1
меню-аккордеон
C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем 1
menu
<ul class="menu">
<li>
<a href="#">Punkt 1</a>
</li>
<li>
<a href="#">Punkt 2</a>
</li>
<li>
<a href="#">Punkt 3</a>
</li>
<li>
<a href="#">Punkt 4</a>
</li>
<li>
<a href="#">Punkt 5</a>
</li>
</ul>Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).
То есть, у нас есть пять пунктов внешнего меню - вот мы и вложим в каждый из них еще одно меню, перед ссылкой. Ссылка будет исполнять роль переключателя, который будет переводить значение свойства 1
display
1
block
В итоге получиться пять подменю, для каждого из которых мы пропишем один класс - 1
sub-menu
<ul class="menu">
<li>
<a href="#">Punkt 1</a>
<ul class="sub-menu">
<li>
<a href="#">Punkt 1-1</a>
</li>
<li>
<a href="#">Punkt 1-2</a>
</li>
<li>
<a href="#">Punkt 1-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 2</a>
<ul class="sub-menu">
<li>
<a href="#">Punkt 2-1</a>
</li>
<li>
<a href="#">Punkt 2-2</a>
</li>
<li>
<a href="#">Punkt 2-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 3</a>
<ul class="sub-menu">
<li>
<a href="#">Punkt 3-1</a>
</li>
<li>
<a href="#">Punkt 3-2</a>
</li>
<li>
<a href="#">Punkt 3-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 4</a>
<ul class="sub-menu">
<li>
<a href="#">Punkt 4-1</a>
</li>
<li>
<a href="#">Punkt 4-2</a>
</li>
<li>
<a href="#">Punkt 4-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Punkt 5</a>
<ul class="sub-menu">
<li>
<a href="#">Punkt 5-1</a>
</li>
<li>
<a href="#">Punkt 5-2</a>
</li>
<li>
<a href="#">Punkt 5-3</a>
</li>
</ul>
</li>
</ul>Все - каркас будущего вертикального меню готов и больше мы его трогать не будем. Остальные действия будем выполнять только с помощью CSS. Для начала создадим базовые стили, чтобы придать нашему меню хоть какой-то вид:
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul{
list-style-type: none;
}
.menu{
margin: 30px 0 0 30px;
width: 100px;
}Здесь мы обнуляем 1
margin
1
padding
1
ul
Для внешнего списка с классом menu задаем отступ сверху и слева, чтобы не прилипал к границам окна браузера и устанавливаем фиксированную ширину в 1
100px
Дальше форматируем пункты меню:
.menu li{
position: relative;
line-height: 20px;
background-color: #ccc;
margin-bottom: 1px;
}Ставим высоту каждого элемента 1
li
1
margin
1
li
Последний шаг - устанавливаем для 1
li
Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню - размер шрифта (кегль) и цвет текста:
.menu li a{
font-size: 16px;
color: #000;
}Теперь приступаем к самому интересному - стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):
.sub-menu{
width: 90px;
}Затем установим для подменю абсолютное позиционирование для того, чтобы сместить его вправо на значение, равное ширине внешнего списка и “прилепить” кверху каждого из элементов 1
li
И самое главное - скроем его отображение в браузере через правило 1
display: none
.sub-menu{
width: 90px;
position: absolute;
left: 100px;
top: 0;
display: none;
}Немного стилизуем пункты меню и ссылки в подменю. Для каждого пункта подменю устанавливаем цвет фона, чтобы отличать подменю от основного меню. И цвет ссылок по той же причине:
.sub-menu li{
background-color: #aaa;
}
.sub-menu li a{
color: #fff;
}Заключительный код, который заставляет наше меню работать именно так, как задумано. То есть, этим мы говорим браузеру присвоить свойству 1
display
1
block
.menu li:hover .sub-menu{
display: block;
}В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него 1
display: none
1
ul
1
sub-menu
Так как этому подменю задано абсолютное позиционирование со смещением вправо на 1
100px
1
0px
В принципе, на этом уже все сказано. Основной принцип вертикального меню показан и создан. Остальное - уже дело техники, если нужно придать ему нужный вид. На закуску пример нашего меню в обычном состоянии:
И меню, когда наведена мышка на один из пунктов меню и справа появляется подменю, соответствующее этому пункту:
На этом все.