Menu is one of the important components of any site. Today it is difficult to find a website without the navigation menu. Today we have prepared a modern looking single-level menu. You might think – again, but the menu looks really interesting, its feature is a sliding panel which highlights the active elements (something like a lavalamp menu). Previously, we have already seen the creation of lavalamp menu (one of our tutorials), but it had a slight drawback – it was not possible to set the active element. We have overcome this obstacle, and in today’s menu, you can initially indicate active elements (as it is seen in the demo). Now we can start looking at the order of its creation.
Live Demo
HTML
We did not invent a special html menu structure, as usual, we decided to use the usual UL-LI elements to build the menu. Here is the html of our menu:
nav id="menu"
ul
lia href=""HTML/CSS/a/li
lia href=""HTML5/a/li
lia href=""jQuery/a/li
lia href=""PHP/a/li
lia href=""Javascript/a/li
lia href=""Design/a/li
lia href=""Other/a/li
div class="current"
div class="ctoparr"/div
div class="cback"/div
div class="cbotarr"/div
/div
/ul
/nav
As I noted before, nowe we have the opportunity to set active elements – simply add ‘selected’ class for a necessary LI element, example:
nav id="menu"
ul
lia href=""HTML/CSS/a/li
lia href=""HTML5/a/li
lia href=""jQuery/a/li
lia href=""PHP/a/li
li class="selected"a href=""Javascript/a/li
lia href=""Design/a/li
lia href=""Other/a/li
div class="current"
div class="ctoparr"/div
div class="cback"/div
div class="cbotarr"/div
/div
/ul
/nav
Besides of UL-LI elements, you can notice another added element – DIV with three children:
div class="current" div class="ctoparr"/div div class="cback"/div div class="cbotarr"/div /div
This is the sliding element that moves behind active (and hover elements). Now we can start styling our menu.
CSS
The menu is aligned to center, with 90% in width and 128px in height.
#menu {
display: inline-block;
height: 128px;
margin: 100px 5% 0;
text-align: center;
white-space: nowrap;
width: 90%;
}
#menu ul {
margin: 0;
padding: 0;
position: relative;
}
#menu ul:after {
clear: both;
content: "";
display: block;
}
Menu elements are aligned from left to right, all elements are of the same width, with different icons at background:
#menu li {
background-position: 50% center;
display: block;
float: left;
font-size: 18px;
font-weight: bold;
height: 128px;
line-height: 210px;
margin-right: 1%;
position: relative;
white-space: nowrap;
width: 13%;
z-index: 2;
}
#menu li:after {
background: url("../images/bg.png") repeat scroll 0 0;
content: "";
height: 100%;
position: absolute;
right: -10%;
top: 0;
width: 10%;
}
#menu li:nth-child(1):before {
background: url("../images/bg.png") repeat scroll 0 0;
content: "";
height: 100%;
left: -10%;
position: absolute;
top: 0;
width: 10%;
}
#menu li:nth-child(1) {
background: url("../images/1.png") no-repeat center;
margin-left: 1%;
}
#menu li:nth-child(2) {
background: url("../images/2.png") no-repeat center;
}
#menu li:nth-child(3) {
background: url("../images/3.png") no-repeat center;
}
#menu li:nth-child(4) {
background: url("../images/4.png") no-repeat center;
}
#menu li:nth-child(5) {
background: url("../images/5.png") no-repeat center;
}
#menu li:nth-child(6) {
background: url("../images/1.png") no-repeat center;
}
#menu li:nth-child(7) {
background: url("../images/2.png") no-repeat center;
}
#menu a {
color:
display: block;
height: 100%;
text-decoration: none;
}
The slider is a small element with smooth transition effect (to move it). It contains of the background and two additional elements (at top and bottom) – little triangles with additional shadows:
.current{
height: 158px;
left: 7.5%;
margin-left: -50px;
position: absolute;
top: -13px;
width: 100px;
-webkit-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
-moz-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
-o-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
-ms-transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
transition: all 400ms cubic-bezier(0, 1.1, 0.5, 1.1);
}
.cback {
background-color:
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
border-radius: 10px;
height: 100%;
position: absolute;
width: 100%;
}
.ctoparr {
height: 12px;
left: 0;
overflow: hidden;
position: absolute;
top: 13px;
width: 100%;
z-index: 2;
}
.ctoparr:before {
border-radius: 20%;
box-shadow: 0 0 15px
content: "";
height: 10px;
left: 5%;
position: absolute;
top: -10px;
width: 90%;
}
.ctoparr:after{
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid
content: "";
height: 0;
left: 50%;
margin-left: -8px;
position: absolute;
top: 0;
width: 0;
}
.cbotarr {
bottom: 17px;
height: 12px;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 2;
}
.cbotarr:before {
border-radius: 20%;
bottom: -10px;
box-shadow: 0 0 15px
content: "";
height: 10px;
left: 5%;
position: absolute;
width: 90%;
}
.cbotarr:after {
border-bottom: 12px solid
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: 0;
content: "";
height: 0;
left: 50%;
margin-left: -8px;
position: absolute;
width: 0;
}
Finally, in order to move the slider like in the lavalamp menu, we need to add the following styles:
#menu li.selected:nth-child(1) ~ .current {
left: 7.5%;
}
#menu li.selected:nth-child(2) ~ .current {
left: 21.5%;
}
#menu li.selected:nth-child(3) ~ .current {
left: 35.5%;
}
#menu li.selected:nth-child(4) ~ .current {
left: 49.5%;
}
#menu li.selected:nth-child(5) ~ .current {
left: 63.5%;
}
#menu li.selected:nth-child(6) ~ .current {
left: 77.5%;
}
#menu li.selected:nth-child(7) ~ .current {
left: 91.5%;
}
#menu li:nth-child(1):hover ~ .current {
left: 7.5%;
}
#menu li:nth-child(2):hover ~ .current {
left: 21.5%;
}
#menu li:nth-child(3):hover ~ .current {
left: 35.5%;
}
#menu li:nth-child(4):hover ~ .current {
left: 49.5%;
}
#menu li:nth-child(5):hover ~ .current {
left: 63.5%;
}
#menu li:nth-child(6):hover ~ .current {
left: 77.5%;
}
#menu li:nth-child(7):hover ~ .current {
left: 91.5%;
}
Thus, as you can see, when we hover our child elements, it moves the slider toward the hover element position (in it’s middle). Besides of that, it will keep the slider at the position of pre-selected element (.selected class). That’s all. We have just completed creating our new menu with the slider.
Come back to our website next time for new tutorials
Live Demo
[sociallocker]
download in package
[/sociallocker]
