Вертикальное меню с выпадающим подменю на CSS

Вертикальное меню с выпадающим подменю

Еще один распространенный тип меню — это меню с выпадающими подменю. Обычно в таких меню только два уровня, но встречаются и многоуровневые, когда из выпадающего подменю может выпадать еще одно и так далее.

Разметка таких меню простая — обычный многоуровневый список. При создании такого меню необходимо использовать абсолютное и относительное позиционирование.

Обычно элементам списка li верхнего уровня задают относительное позиционирование, а для выпадающего меню — абсолютное.

Выглядеть оно будет следующим образом.

CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».

Значение relative обозначает «относительное позиционирование». Относительно спозиционированный элемент можно перемещать относительно его исходного положения.

Значение absolute свойства position задаёт элементу абсолютное позиционирование.

Абсолютно спозиционированные элементы обладают следующими особенностями:

Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.

Теперь приступим к делу!!!

Для начала создадим шаблон нашего будущего меню.

<div class="sidebar">
<ul class="menu">
    <li class="p_menu"><a href="#">Главная </a>
        <ul class="v_menu">
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
        </ul>
    </li>
    <li class="p_menu"><a href="#">Поиск</a>
        <ul class="v_menu">
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
        </ul>
    </li>
    <li><a href="#">Регестрация</a></li>
    <li class="p_menu"><a href="#">Карта сайта</a>
        <ul class="v_menu">
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
            <li><a href="#">подменю</a></li>
         	</ul>
    </li>
    <li><a href="#">О сайте</a></li>
</ul>
</div>

Готово!!!

Теперь уберем внутренние и внешние отступы и маркеры.

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

Преукрасим наше меню.

.menu a{
    background:#3d3d3d;
    color: #fff;
    padding: 10px;
    display: block;
    border-bottom: 1px solid #666;
    transition: 0.5s all;
}
.sidebar{
    width: 200px;
    margin: 20px;
}
.menu a:hover{
    background: #666;
    padding: 10px 0 10px 20px;
}
.menu li:first-child a, .menu li .v_menu li:first-child a{
    border-radius: 3px 3px 0 0;
}
.menu li:last-child a, .menu li .v_menu li:last-child a{
    border-radius: 0 0 3px 3px;
    border-bottom: 0;
}
.menu li .v_menu li a{
    border-radius: 0;
}

Теперь займемся всплывающими подпунктами.

.p_menu{position: relative;}
.v_menu{
    position: absolute;
    width: 100%;
    left: 100%;
    top: -9999px;
    opacity: 0;
    border-left: 10px solid transparent;
    transition: 0.5s opacity;
}
.p_menu:hover .v_menu{
    opacity: 1;
    top: 0;
}

В принципе меню готово но, для привлекательности добавим треугольнички показывающие, что у пункта меню есть подпункты.

.p_menu::after{
    content: "";
    position: absolute;
    border:5px solid;
    border-color: transparent transparent transparent #eee;
    top:1em;
    right: 0.7em;
    transition: 0.5s;
}
.p_menu:hover::after{
    transform: scaleX(-1);
}

Наше меню готово можете использовать его на своем сайте.

на главную