Sliding single-level menu

Sliding single-level menu

0 30840
Sliding single-level menu

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>
<li><a href="">HTML/CSS</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">Design</a></li>
<li><a 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>
<li><a href="">HTML/CSS</a></li>
<li><a href="">HTML5</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">PHP</a></li>
<li class="selected"><a href="">Javascript</a></li>
<li><a href="">Design</a></li>
<li><a 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: #eee;
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: #aadd33;
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 #000;
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 #aadd33;
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 #000;
content: "";
height: 10px;
left: 5%;
position: absolute;
width: 90%;
}
.cbotarr:after {
border-bottom: 12px solid #aadd33;
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

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 50
jQuery Mobile Lesson 5

0 75

NO COMMENTS

Leave a Reply