Vertical menu with dropdown submenu
Another common type of menu is the dropdown menu. Typically, such menus have only two levels, but there are also multi-level ones, when another one can drop out of a drop-down submenu, and so on.
The layout of such menus is simple – a regular multi-level list. When creating such a menu, you must use absolute and relative positioning.
Typically, top-level li list items are positioned relative, while drop-down menus are absolute.
It will look like this.
The position CSS property specifies the positioning mode of elements. The default value is static , which means “regular positioning”.
The relative value means “relative positioning”. A relatively positioned element can be moved relative to its original position.
The absolute value of the position property sets the element to absolute positioning.
Absolutely positioned elements have the following properties:
- Drop out of the document flow. The place that they occupied becomes, as it were, empty and is occupied by neighboring elements.
- The default width depends on the content (rather than stretching to the full available width).
- They remain in the same place where they were, if the values of the top, left, right , bottom properties are not set .
Now let’s get down to business!!!
First, let’s create a template for our future menu.
<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>
Done!!!
Now let’s remove the inner and outer indents and markers.
ul{
margin: 0;
padding: 0;
list-style: none;
}
Let’s redecorate our menu.
.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;
}
Now let’s deal with the pop-up sub-items.
.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;
}
In principle, the menu is ready, but for the sake of attractiveness, let’s add triangles showing that the menu item has sub-items.
.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)