Flashuser

  • Pin It

Create a Ribbon DropDown Menu with CSS3 and jQuery

In this tutorial, I’ll show you how to create a simple ribbon dropdown menu using CSS3 and jQuery. The menu is cross-browser compatible so it will be easy for you to adapt in your project. And to spice up a little bit the menu, I used the superfish javascript class and “Oswald” font from Google fonts library.

In the downloaded archive you’ll also have acces to the PSD file, in case you need to change the design. Let’s see now how the CSS3 dropdown menu was done. You can also check our collection of amazing CSS menu tutorials.

css3-jquery-menu-tutorial

You may also like the following css3 menu inspiration articles:

HTML CODE

The HTML structure is pretty simple and easy to understand if you know the basics. We’ll use an unordered list for the menu and will make it look good with CSS.

<ul class="menu">
<li><a href="http://www.flashuser.net">Home</a></li>
<li><a href="#">Dropdown</a>
<ul>
<li><a href="http://www.flashuser.net/category/css">CSS</a></li>
<li><a href="http://www.flashuser.net/category/tutorials">Tutorials</a></li>
<li><a href="http://www.flashuser.net/category/photoshop">Photoshop</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul>
<li><a href="http://www.flashuser.net/category/freebies">Freebies</a></li>
<li><a href="http://www.flashuser.net/category/photography">Photography</a></li>
<li><a href="http://www.flashuser.net/category/web-design">Web Design</a></li>
<li><a href="http://www.flashuser.net/category/wordpress">Wordpress</a></li>
<li><a href="http://www.flashuser.net/category/inspiration">Inspiration</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

Also we’ll use two divs for the ribbon edges.

  <div id="corner-left">Corner left</div>
  <div id="corner-right">Corner right</div>

Here’s the tag you have to add if you want to use the “Oswald” font from the Google fonts library. You can check the available Google fonts here.

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

CSS CODE

Now for the main menu will use a background gradient color and a text shadow for the menu items. Also position the ribbon left and right edge in their spot.

.menu {margin:0 auto;
padding:0;
width:700px;
height: 61px;	
background: #656d80;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #656d80),color-stop(0.6, #8690a9));
background: -moz-linear-gradient(center bottom,#656d80 0%, #8690a9 60%);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8690a9', endColorstr='#656d80');
}
.menu li {background: url("../images/menu-separator.gif") no-repeat scroll right center transparent;padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;}
.menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0px 1px 0px #000000;}
.menu li:hover > a {color:#ffffff;
background:#56596a;
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56596a),color-stop(0.6, #686c80));
background: -moz-linear-gradient(center bottom,#56596a 0%, #686c80 60%);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#686c80', endColorstr='#56596a');
}

#corner-left{position:absolute;background:url("../images/corner-left.png") no-repeat 0 0;top:19px;left:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}
#corner-right{position:absolute;background:url("../images/corner-right.png") no-repeat 0 0;top:19px;right:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}

The drop down menu has two sections. One that hides the submenu when no main menu item is hovered the other one displays it. Here’s the code for doing that.

.menu ul { background: #56596a;
display: none;
margin: 0;
padding: 0;
width: 190px;
position: absolute;
top: 61px;
left: -1px;
}
.menu li:hover > ul {display: block;}
.menu ul li {display:block;
float: none;
margin: 0px 0px 0px 15px;
padding:2px 0px;
background:url("../images/submenu-sep.gif") no-repeat scroll left bottom transparent;
}

The last part is about sub menu hover link styles, with a minor fix in IE for the background. If you commented that part you’ll see that in IE the hover state inherits the main menu hover style state.

.menu ul li:hover a, .menu li:hover li a {
	background: none;
	color: #ffffff;
}
.menu ul a {
display:block;height:auto;
	font-size: 14px;
	padding:15px 0px 15px 10px;
}
.menu ul a:hover, .menu ul li:hover > a{
	background: #56596a !important;
	/* fix IE */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#56596a', endColorstr='#56596a'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#56596a), to(#56596a)) !important;
	background: -moz-linear-gradient(top,  #56596a,  #56596a) !important;
	color: #e0e0e0 !important;
}

JQUERY CODE

To animate the menu will use the javascript superfish class. First of all make sure you included the jQuery library and the superfish class in the header.

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script src="js/superfish.js" type="text/javascript"></script>

Now you can play with the superfish options to come up with an animation that fits your needs.

if (jQuery().superfish) {
		jQuery('ul.menu').superfish({
			delay: 230,
			animation: {opacity:'show', height:'show'},
			speed: 'fast',
			autoArrows: false,
			dropShadows: false
		}); 
	
	}	
	
	}); 

CONCLUSION

That’s it for now. Download the archive and play with the settings. Let us know if you enjoyed this tutorial and used the menu in a project.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+