Submit your widget

jQuery and CSS3 Vertical Menu effect

Created 10 years ago   Views 20467   downloads 4099    Author ourtuts
jQuery and CSS3 Vertical Menu effect
View DemoDownload
Share |

we'll going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery.

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!

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> 
	<title>Vertical Menu</title> 
	<link href=',700' rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="" /></script>
	<link href="" rel="stylesheet" />
	<!--[if IE 7]>
	<link href="" rel="stylesheet" />


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>

Read more: