by: Madalin Tudosein: CSS3, HTML5, jQuery, Tutorials

Simple Vertical Menu with jQuery and CSS3


Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 385

Notice: Trying to access array offset on value of type bool in /home/853194.cloudwaysapps.com/ypzheydydh/public_html/wp-content/plugins/yet-another-stars-rating/public/classes/YasrRichSnippets.php on line 386

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:

Demo
Vertical Menu (9839 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='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js" /></script>

	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

</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 sometimes!

Demo
Vertical Menu (9839 downloads)
Click to rate this post!
[Total: 3 Average: 5]

Madalin Tudose

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.