Rocking and Rolling Rounded Menu with jQuery

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, […]

View demoDownload source

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Ok, so let’s get started, it’s less complicated than it looks.

The Markup

For this menu we will not create a list, but div elements for each menu item. We will pack the menu items in a main div called menu. Each item will have an icon as link element and a content div with the heading and a paragraph where we will add links or a search box:

<div class="menu">
	<div class="item">
		<a class="link icon_mail"></a>
		<div class="item_content">
			<h2>Contact us</h2>
			<p>
				<a href="#">eMail</a>
				<a href="#">Twitter</a>
				<a href="#">Facebook</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_help"></a>
		<div class="item_content">
			<h2>Help</h2>
			<p>
				<a href="#">FAQ</a>
				<a href="#">Live Support</a>
				<a href="#">Tickets</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_find"></a>
		<div class="item_content">
			<h2>Search</h2>
			<p>
				<input type="text"></input>
				<a href="">Go</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_photos"></a>
		<div class="item_content">
			<h2>Image Gallery</h2>
			<p>
				<a href="#">Categories</a>
				<a href="#">Archives</a>
				<a href="#">Featured</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_home"></a>
		<div class="item_content">
			<h2>Start from here</h2>
			<p>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pricing</a>
			</p>
		</div>
	</div>
</div>

Initially, the item div will be just as big to surround the icon, we will make it expand then and we will reveal the content afterward.

The CSS

The general style for the menu like the font will be defined as follows:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

The items inside of the menu will be floating right, since we want the items to expand to the left and push the other items away:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Then we define the style of the icons (the link class) in the following way:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

The other content elements we will style as follows:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

With a white text-shadow we can create a nice engraved text effect.
Ok, let’s add some magic.

The JavaScript

First, we need to add the script inclusions of jQuery and the other two scripts of Zachary.
Then we will add the following functions:

$('.item').hover(
	function(){
		var $this = $(this);
		expand($this);
	},
	function(){
		var $this = $(this);
		collapse($this);
	}
);
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

To make things easier, we created two functions, one for expanding an item and one for collapsing it. The expand function will make the icon rotate 4 times around itself (360 times 4 are 1440). We will also make the item expand by animating an increase in its width. Then, we let the content appear, first the whole div and then the paragraph element.

The collapse function will rotate the icon back, decrease the width of the item and make the content disappear.

And that’s it! I hope you enjoyed it!

View demoDownload source

Message from TestkingJoin testking 642-384 web designing course to learn how to design successful websites using css and jQuery. Download testking 70-646 and testking 642-504 tutorials to get useful information on latest web design practices.
Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 53

Comments are closed.
  1. 4

    Hey this is very useful, thank you! I was wondering, was there a java function to keep the buttons open once hovered over? Then once another button is hovered, it collapses the previous button, opening the newly hovered button? Having a hard time finding that…

    Thanks again, jood work!

  2. 6

    Hi! Good job!!! :)
    Sorry for my bad english.
    How can I make sure that the rotation of the icons is made at each “onmouseover” and not just the first time?

  3. 7

    hi in your RollingMenu toturial there is a problem when i downloaded the zip file
    in your online sample code the jquery file is

    but the downloaded file is

    Please fix it

    thanx for your best web site (Your Iranian Fan mojtaba)

  4. 9

    *********\\\\\\\\\\\BUG//////////**********
    It does not work with the latest Jquery (1.7.x) code. Only work with Jquery 1.5.2 version.

    Please fix it.

Comments are closed.