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 to the width of the current item, and we will slide out a description bar from the left side of the page, […]

View demoDownload source

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!

View demoDownload source

Previous:
Next:

Tagged with:

ML 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://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 115

Comments are closed.
  1. 2

    2Artek:

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

  2. 3

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

  3. 4

    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

  4. 5

    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

  5. 6

    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();
    });

  6. 7

    Correction: (because that’s shorter)

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

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

  7. 8

    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.

  8. 9

    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?

  9. 10

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

  10. 12

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

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

  11. 13

    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…

  12. 14

    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 🙂

  13. 15

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

  14. 16

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

  15. 18

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

  16. 19

    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. 🙁

  17. 20

    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.

Comments are closed.