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 […]

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!

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 53

Comments are closed.
  1. I really like this, however, it doesn’t work with jscript disabled, maybe making the div fully expanded, but onpage load, resize the div via the Jquery?

  2. This is a slick looking implementation, but it isn’t the least bit accessible. The A element that holds the icon has no alt text or HREF so it isn’t clickable or focusable. There is no way for someone with motor control issues or a screen reader to use this menu. I’d like to see a real effort made by the Jquery community to make these wonderful ideas accessible in basic terms. Of course we should also really be pushing WAI-ARIA. Adding a tabindex and a role to the top level div as well as interaction on pressing “enter” would go a long way to improving this particular menu.

    • Hello Greg,
      first of all, thanks a lot for your very important comment, I do agree with you and we will make an effort to make things better and more accessible. I have the habit to use an a for icons because in most cases it actually is a link or I make use of the hover ability. But here I could indeed replace it and use something more sensible. As an experimenter I loose myself in “bending” the html to the “effect needs”, but as you point out, things should not be just pretty but correct, accessible and user-friendly. Thanks again and keep tuned,
      cheers from the whole team,
      ML

  3. I would echo the first comment and say that the menu/links must be workable without JS. Having the menu items fully expanded when JS is unavailable would be the way to go here. That would give you a nice effect but with graceful degradation.

  4. Awesome effect! But looks like IE doesn’t like Rock n Roll at all ๐Ÿ™ Both of IE8 and IE7

  5. It looks really cool.
    But the fact that it’s not really cross-browser is a bummer.

  6. Beatiful animation. Smooth and great graphics. Oh how I love JQuery!

  7. This really cool, could be a lot of fun for certain projects! Not exactly ideal for nav but it’s fun nonetheless!

  8. fun and amazing animation with jqury.

    May be i can use it on some of my project

  9. I really like this menu. Is there any way to stop it from collapsing when I take the cursor off of the icon?

    Thanks

  10. i was looking for this kind of things…thank u…this is awesome ๐Ÿ˜€

  11. too bad it is not cross browser compatible, but this is cool nonetheless ๐Ÿ™‚

  12. looks great and all.. i am impressed…
    but it kinda looks like a tampon, hehe =)

    good work!

  13. any tips on how to add customise these to integrate them easily into a dreamweaver site. I was trying to fit either this or the slide down menu into a 640px box but was finding it hard to do this smoothly. any tips?? thanks alot, love the menus!!

  14. Awesome tutorial….loved it …. one qns where can i find this same icon….thanx

  15. Hi Mary Lou,

    It’s very nice, really love it…You got the talent to make it rock n roll!

    Anyway, could you please help me if I want it to appear vertically instead of horizontally like you did and when mouse over it’s slide vertically to the right?

    and one more thing, how to make it works on IE?

    Finally thanks a lot mary and appreciate if I can get you email address. my email is balbed@gmail.com.

    Again many thanks for your time.

  16. Hi Mary Lou,

    It’s very nice, really love it…You got the talent to make it rock n roll!

    Anyway, could you please help me if I want it to appear vertically instead of horizontally like you did and when mouse over it’s slide vertically to the right?

    and one more thing, how to make it works on IE?

    Finally thanks a lot mary and appreciate if I can get your email address. my email is balbed@gmail.com.

    Again many thanks for your time.

  17. hi, i can’t use this example with jquery 1.2.3 (it’s necessary for my app). Can you help me please?

    thanks!

  18. Great Work !! ๐Ÿ™‚
    But Any Bug solve for IE ??
    I just need it to rotate in IE is it possible ?
    I can solve all other bugs in IE for this Rocking n Rolling menu … but I don’t know jquery that much… so if u can just make it work the rolling effect in IE it will be great… Please Reply ASAP ..

  19. Hey What happened to this funky navigation?? It’s not working ๐Ÿ™
    Something is wrong…. Please look at the demo n plz let me know what’s d real problem …. ๐Ÿ™

  20. Hi, I found this code very interesting for a project that I have to develop. I’m a graphic designer, so my programming notions are very low. When I want to use a js code, normally I copy/paste it and, changing minimum things, try to make it work with my needs.

    This time I find that I don’t know how to make it work as I want, so if anyone can help me… let me explain the two things I want to change:

    1. Now the menu works on “hover” state, but I want to make it work on “click”, so if you click an element it should expand and remain expanded until you click on another element; if you did it, then the new element should expand and the one that was already open should collapse.

    2. The second thing is a little bit trickier (I think). Instead of making the icon rotate when you place your mouse over it, I want it to change to another image (an hover image) and, when you click it, it should change again to another third image that would be an animated gif.

    I hope to have explained it clearly, my English is not very good.

    Thanks in advance!

  21. Hi,
    Nice menu. Next problems with it. The code blocked scroll down panel in FireFox 3.6,12 and IE8. Opera 10.63 works fine. And the icons are rolling only one time, when loading page for the first time. After that icon and menu only step aside. The icon don’t roll.
    Sry for my English
    Best regards

  22. Nice example, However in the demo you have available when you hover of the actual search input field the menu closes.

    You need to stop the bubbling.

  23. Hi, all

    I’m using similar (image/ icon div) navigation technique for my vcard and got w3c validation error that says ” must have src attribute”.

    I wonder if we could ignore that and continued using that img div navigation techniques or find a beter one?

  24. 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!

  25. 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?

  26. 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)

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

    Please fix it.