vertical-menu-thumbnail

In this tutorial I`m going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.

Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!

The mobile devices revolution which is currently happening is changing the way we see the web and internet. Images used as graphics are no longer a solution, due to new mobile screen features like retina display, which make them look blurred. For this reason, scalable resources, sharp as a pixel are slowly becoming a standard in any web design project. That`s a good thing, you know, because now we have solutions for that. One of them is icon font, a thing which we`ll be using next. Let`s get started!

What we`ll be doing today:

vertical menu image Simple Vertical Menu with jQuery and CSS3

3083 downloads

HTML Markup

Let`s set up the HTML structure. Before adding anything between body tags, we need to set up the header. I like custom things, so why should`t we used them? When I say custom in web design, I mean custom fonts. We`ll be using 2 custom fonts: one for the text and the other for the icons. I chose Quicksand for text and the amazing FontAwesome font for the icons. They both use the @font-face technique to integrate their characters into the webpage, whether if they are simple characters or icons. We`ll also use some jQuery along the way, to add a nice effect over the menu list, so the basic HTML markup looks like this:

<!DOCTYPE html> 
<html> 
<head>
	<title>Vertical Menu</title> 
	<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js" /></script>
	
	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
	<!--[if IE 7]>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css" rel="stylesheet" />
	<![endif]-->
</head>
<body>

</body>
</html>

Notice that I decided to use the already hosted versions of the source files. Why not to, if I can, wright? It`s a convenient solution, but it`s good to keep copies of the files on your server, in case something might go wrong with these ones. The icon font comes with a customized solution for IE7, which is also hosted along with the big one.

The structure of the menu is as simple as an unordered list:

<ul class="form">
	<li><a class="profile" href="#"><i class="icon-user"></i>Edit Profile</a></li>
	<li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
	<li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li>
	<li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>

The list has a class assigned, for identification; each list item contains a link and the icon code. For the full list of icons available(+300 icons), check out the official page. Each list item link has a class assigned, used for individual customizing.

Now let`s proceed to the CSS. The main UL has styles for positioning, like margin, width and padding, but also, CSS3 specific styles for generating shadows and borders:

ul.form {
	position:relative;
	background:#fff;
	width:250px;
	margin:auto;
	padding:0;
	list-style: none;
	overflow:hidden;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	
	-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
	box-shadow:  1px 1px 10px rgba(0, 0, 0, 0.1);	
}

Then comes the styles for the link(“a”). Each item has a 50px height and uppercase letters for text. I`ve also set a CSS3 transition for a smoother hover effect:

.form li a {
	width:225px;
	padding-left:20px;
	height:50px;
	line-height:50px;
	display:block;
	overflow:hidden;
	position:relative;
	text-decoration:none;
	text-transform:uppercase;
	font-size:14px;
	color:#686868;
	
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;			
}

.form li a:hover {
	background:#efefef;
}

.form li.selected a {
	background:#efefef;
}

Let`s stylize each list element a bit with some left border in a specific color:

.form li a.profile {
	border-left:5px solid #008747;
}
.form li a.messages {
		border-left:5px solid #fecf54;
	}
	
.form li a.settings {
		border-left:5px solid #cf2130;
	}
.form li a.logout {
		border-left:5px solid #dde2d5;
	}	

It`s well known the bug which appears when borders are used within elements with border-radius set. That`s why we`re taking a safety measure by adding border-radius to the “a” first and last elements as well, but only at top and bottom:

.form li:first-child a:hover, .form li:first-child a {
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.form li:last-child a:hover, .form li:last-child a {
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

Next comes the icons. To integrate with the rest of the items, they also have a transition set for hover.

.form i {
	margin-right:15px;
	
	-webkit-transition:all 0.2s linear;
	-moz-transition:all 0.2s linear;
	-o-transition:all 0.2s linear;
	transition:all 0.2s linear;	
}

.form li a:hover i {
	color:#ea4f35;
}

Last CSS related thing is that small red circle which shows the number of messages:

.form em {
	font-size: 10px;
	background: #ea4f35;
	padding: 3px 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;		
	font-style: normal;
	color: #fff;
	margin-top: 17px;
	margin-right: 15px;
	line-height: 10px;
	height: 10px;		
	float:right;
}

Last touch, we`ll add a bit of jQuery code, for creating a smooth effect, when a list item is clicked or selected. When we click on a list item, we want to assign it the “.selected” class, so we can stylize it as the current item.

$(document).ready(function() {
	$('ul.form li a').click(
		function(e) {
			e.preventDefault(); 
			e.stopPropagation; 
			$(this).closest('ul').find('.selected').removeClass('selected');
			$(this).parent().addClass('selected');
		});
});

And that`s it! Hope you enjoy the simple navigation menu and find this tutorial useful. Who knows…it can get in handy sometime!

3083 downloads

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • http://www.pankajnikam.net/ Pankaj Nikam

    Awesome menu :)
    Thanks for the share. Its just the one I was looking for.
    I guess mostly the code here is of CSS3. JQuery plays a very little role in this. Am I right?

  • Nux

    You could use :before instead of <i> element. It works fine in jQuery Mobile so should work on anything that remains important.

  • Nicolas Gaudin

    Don’t understand the usefulness of javascript in this case, but otherwise, the effect is quite nice.