Vertical Slide Hover Effect for Menu Bars with CSS3

A hover effect is the transition that takes place when you move your pointer over a menu bar item. Such hover effects can be used anywhere but mostly they are used for navigation bars and other kinds of menus.

There are various kinds of hover effects around the internet, but a very popular one is the vertical slide. This effect is subtle, stylish and effective.

If this effect is not a new one, then why am I teaching it? That’s because earlier this effect was used to be created with JavaScript (or with Flash in the prehistoric days). But we will be creating it using pure CSS.

A navigation bar the backbone of a web design. Design this right and you get good conversion rate. So you have to pay lots and lots of attention towards designing navigation bars. This is the reason we share so many posts on navigation bars.

Let’s not waste anymore time. Here’s the tutorial. Don’t forget to check out the demo.
And in the end, don’t forget to tell us what you think of it. You can use the comments section below.

Thanks for tuning in.

Live Demo

HTML Code

<ul id="nav">
	<li class="home"><a href="#">Home</a></li>
	<li class="tutorials"><a href="#">Tutorials</a></li>
	<li class="about"><a href="#">Coding</a></li>
	<li class="news"><a href="#">WordPress</a></li>
	<li class="contact"><a href="#">Contact</a></li>
</ul>

CSS Code

ul li {
background:#000;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
li:nth-child(1) a {
border-color: #636393;
}
li:nth-child(2) a {
border-color: #B5222D;
}
li:nth-child(3) a {
border-color: #D4953C;
}
li:nth-child(4) a {
border-color: #609491;
}
li:nth-child(5) a {
border-color: #87A248;
}
li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}
li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}
li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}
li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}
li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}

Live Demo