Awesome Cufonized Fly-out Menu with jQuery and CSS3

In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts […]

From our sponsor: Try Mailchimp today.

In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.

So, let’s start!

The Markup

The HTML structure will consist of an unordered list that represents our menu and a div for the description elements:

<div id="slidingMenuDesc" class="slidingMenuDesc">
	<div><span>Description for "About"</span></div>
	...
</div>

<ul id="slidingMenu" class="slidingMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Get a quote</a></li>
</ul>

We leave out the description for “Home” since there is nothing to describe. The sliding divs should just appear when we hover over the other items.

The CSS

First, we will style the menu and its navigation items and then we will style the description elements.
Let’s reset some styles:

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}

The background is going to be dark gray:

body{
	background:#292929;
}

The list for the menu items is going to be positioned absolutely at the right side of the screen:

.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	right:1px;
	font-family: Arial, Helvetica, sans-serif;
}

The menu items are hoing to float right:

.slidingMenu li {
	display:block;
	float:right;
	clear:both;
	position:relative;
	overflow:hidden;
}

The “mover” element will be positioned absolutely and we will give it a top and a width dynamically:

.slidingMenu li.move {
	width: 9px;
	height: 68px;
	right:0px;
	padding-right:10px;
	margin-top:2px;
	z-index: 8;
	position: absolute;
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	-moz-border-radius: 8px 0px 0px 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	}

We will give this moving hover element a very subtle background gradient and some box shadow.
The style for the link element will be as follows:

.slidingMenu li a {
	font-size:66px;
	text-transform:uppercase;
	text-decoration: none;
	color: #ddd;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 66px;
	line-height: 66px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}

The descriptions will be in a relatively positioned container. We set the margin-top to the same value like the top of the menu list:

/* Descriptions */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}

The div with the description span inside is going to have the same background-gradient like the mover and the same box shadow. The rounded borders are going to be on the opposite corners:

.slidingMenuDesc div{
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	height: 68px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

We need to set these element absolute, since we will adjust the top to the according current list element that we are hovering.

The description span is going to be positioned absolutely as well. This is not required but it gives you more options if you would like to apply other animation effects:

.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

And now, let’s take a look at the JavaScript!

The JavaScript

First, we will add the following scripts to our HTML head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="BabelSans_500.font.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

And we will add the following script:

$(function() {
	Cufon.replace('a, span').CSS.ready(function() {
		var $menu 		= $("#slidingMenu");

		/**
		* the first item in the menu,
		* which is selected by default
		*/
		var $selected	= $menu.find('li:first');

		/**
		* this is the absolute element,
		* that is going to move across the menu items
		* It has the width of the selected item
		* and the top is the distance from the item to the top
		*/
		var $moving		= $('<li />',{
			className	: 'move',
			top			: $selected[0].offsetTop + 'px',
			width		: $selected[0].offsetWidth + 'px'
		});

		/**
		* each sliding div (descriptions) will have the same top
		* as the corresponding item in the menu
		*/
		$('#slidingMenuDesc > div').each(function(i){
			var $this = $(this);
			$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
		});

		/**
		* append the absolute div to the menu;
		* when we mouse out from the menu
		* the absolute div moves to the top (like initially);
		* when hovering the items of the menu, we move it to its position
		*/
		$menu.bind('mouseleave',function(){
				moveTo($selected,400);
			  })
			 .append($moving)
			 .find('li')
			 .not('.move')
			 .bind('mouseenter',function(){
				var $this = $(this);
				var offsetLeft = $this.offset().left - 20;
				//slide in the description
				$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
				//move the absolute div to this item
				moveTo($this,400);
			  })
			  .bind('mouseleave',function(){
				var $this = $(this);
				var offsetLeft = $this.offset().left - 20;
				//slide out the description
				$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
			  });;

		/**
		* moves the absolute div,
		* with a certain speed,
		* to the position of $elem
		*/
		function moveTo($elem,speed){
			$moving.stop(true).animate({
				top		: $elem[0].offsetTop + 'px',
				width	: $elem[0].offsetWidth + 'px'
			}, speed, 'easeOutExpo');
		}
	}) ;
});

After we cufonize the font (all “a” elements and all “span” elements), the main function gets executed. We select the first item by default which is our “Home”. When we hover over a menu item we will move the li.move to the right position and slide out the according description item.

And that’s it! We hope you enjoyed it and find it useful!

Tagged with:

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

Feedback 115

Comments are closed.
  1. Hi Mary Lou,

    Awesome template. Is there any way to make it “sticky” and incorporate submenus? I.e. when user clicks portfolio category on right, then left menu slides in, remains on screen & displays still life, painting, etc subcategories for user to select.

    Thanks in advance!!!

  2. Ok, managed to get this menu working in a div width. I am just experiencing one weird effect and that is the description div flying out too far and overlapping the menu div. Who has the solution for this problem. i hope someone can help me thanks

  3. Currently I don’t know who the blessed person is who created this wonderful and honestly trivial but indeed creative demo, but I throw over some *hugs*!

    Btw folks: I got it working in ie7-9 including umlauts.

    For your interest you should update cufon-yui to 1.09i which makes the fonts work with ie9.

    Have a nice day!
    Best wishes
    Fernandos

  4. Hello,

    Thank you for this great job!
    Is it possible to work with IE6 and later?

    And somebody found solution to work with a separate gallery or slideshow that was posted also above by ROSS?

    Thank you!

  5. Hello,

    I can’t solve to change the activate status of the menu.
    Can told me somebody an easy way. I tried that LEIGH wrote but it’s not working.

  6. Great tutorial – I love it and am using it.
    I have one minor problem that I wonder if you could help with:
    When I click on the link and go to another page and then use the back button to go back, the slide out description bar is still there and will not return and hide until I mouse over and mouse out of the original link. Is there a way to have it return when I return to the original page or did I mess up somewhere?
    Thank again!

  7. is there a way i can un’cufonize this so i can use google fonts instead? it’s a really brilliant piece of code && i’ve managed to customize everything but the menu fonts // it’s live here :: http://bkpkr.info/new

    cheers !! (:

  8. I have been trying to make this work with IE7 but am stuck. I read FernandoS has it working on ie7-9, can you please provide me with some advice?
    Thanks, I love the effect, it looks amazing in FF and Chrome

  9. Hello,

    I’m amazed by this tutorial!
    I’ve been after one like this for months!

    I just have a quick question.
    How do i set the “slidingMenuDesc” menus to stop after sliding out, and be used as a page, so i could add an image gallery or proper contact page etc?

    Any help would be much appreciated!

    Thank you

  10. Hi there,

    Thanks for the great tutorial !

    I have the same problem as many others, I would like the different pages to appear as selected when they are cliked, since here, only the “Home” page is selected… Even if we click on the others…

    I tried the solution of Leigh too, but it doesn’t work…

  11. Hi, really great tutorial, I have the same problem as above to try and get the different pages to highlight when you are viewing them…also my lightbox gallery does not work when it is added on the same page…

  12. Thank you once again Mary Lou, for another great tutorial! You never cease to amaze 🙂
    Just wanted to let you know that i used this script on my new site too (script still needs a little fixing).

    Thank you! 🙂

  13. Got it to work in IE7! In the CSS, take off “position:relative” from the “.slidingMenu li”, and in “.slidingMenu li a”, change overflow to visible. Still works in FF 3.6 and IE8, but no success with IE9 yet.
    I’m still playing with it, but it’s a start! I’m by no means an expert, so if someone has a better way, please share…

  14. Ok, to get it to work in IE9 I just updated the cufon-yui.js to the newer 1.09i from the site here.

  15. amazing a want it but im using blogger and i dont know how to install it

  16. awesome…But do I have to customize if I want it at the left side of my side?

  17. Hi Luis, the download link seems to work just fine. Can you tell me which browser you are using? Cheers, ML

  18. Thanks for all your efforts. It seems that when I use the latest Jquery Library 1.6.1 the menu no longer works. When I switch back to 1.5.2. it works again.
    Using FF on a Mac

  19. Absolutely amazing!

    Is there a way i can change it so the menu sits on the left?

    Thanks!

  20. hi , updated cufon but doesnt seem to work properly on ie 8 text dissapears to far right of the screen , same happens on your demo . any suggestions?

  21. Any ideas on how to make it fit a specific width (like 500px).
    I’m having trouble with it since the descriptions keep getting too long

  22. Can someone help me changing this blue color ?

    or applying a new color to each item of the menu ?

    thx a lot, for your answers and for this wonderful menu.

  23. 2Artek:

    U can change colors in .css file, for bg colors look for “.slidingMenu li.move” and “.slidingMenuDesc div”

  24. Your menu is awesome. Thanks for sharing.
    I have a question: how do i change color menu item when hover it??

  25. hello thanks, very good job.

    but when i try to right on Danis inside of the div.span some letters don’t show up, some one know why? “Ø Æ Å”

    thanks

  26. Thanks for this very beautiful menu.

    I find the answer for IE7 and IE8
    In the CSS :

    .slidingMenu li => delete clear:both; and position:relative;

    .slidingMenuDesc => change margin-top to negative numbers

    That’s also work with IE6, but you can up the negative margin-top.

    Enjoy

  27. Outstanding menu, thank you Mary Lou.

    Anybody looking for the possibility to change the selected item on the site ?

    Here is some code for that:
    var $selected = $menu.find(‘li:first’);

    jQuery.fn.changeSelected = function() {
    $selected = $(this[0].parentNode); // It’s the LI element
    };

    $(“#slidingMenu a”).click(function () {
    $(this).changeSelected();
    });

  28. Correction: (because that’s shorter)

    var $selected = $menu.find(‘li:first’);

    $(“#slidingMenu a”).click(function () {
    $selected = $(this.parentNode);
    });

  29. Thanks so much for this excellent tutorial! I was wondering if someone could assist me in changing the speed of the animation, how far the element flies out from the left, and making that fly out element stay and be clickable. I am still green behind the ears when it comes to jquery. Any hints dropped would be saluted, thanks.

  30. Hey i love this menu – but i cant seem to get it reversed… I need it to slide the desc in from right instead of left… Its not possible to just change in the CSS for this to happen?

  31. OMG! Mary Lou I Salute You.. These Are the possibilities of jquery, i never knew….. You r a brilliant! Thank You 🙂

  32. FOR THOSE OF YOU WHO WANT THIS TO WORK FOR CURRENT PAGES :

    Check out LEIGH comments, he’s explaining how it works !

  33. Excuse me, but the solutions from Shiva and Leigh don’t work 🙁
    Is there anyone who succeed to change the selected item on the site ?
    Thank you very much…

  34. OK, I found the problem in the code of Leigh… Here is the right code :

    /* select menu item with id = “thispage” */
    var $selected = $menu.find(‘#thispage’);

    /**
    * this is the absolute element,
    * that is going to move across the menu items
    * It has the width of the selected item
    * and the top is the distance from the item to the top
    */
    var $moving = $(”,{
    className : ‘move’,
    top : $selected[0].offsetTop + ‘px’, /* <– this doesn't work */
    width : $selected[0].offsetWidth + 'px'
    });

    $moving.css('top',$selected[0].offsetTop + 'px'); /* <– this fixes the problem */

    And it works 🙂

  35. hi, could I use this template for my personal web page?
    In fact, could I use and modified this example?

  36. Thank you for the awesome tutorial, and I also wish to thank Leigh for the customization for further pages.

  37. Is there any way to get the same splendid effect posiotioning the menu on the left side of the page?

  38. As says Kordaat the menu no longer works with Jquery from 1.6.

    When I switch back to 1.5.2. it works again. With any kind of browser. 🙁

  39. excellent tutorial. i have a very simple request if anyone can help me out i would be glad. i have a similar kind of left nav but it’s a wordpress site. so how do i make use of this effect in wordpress. any suggestion’s. thanks.