Slide Down Box Menu with jQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We […]

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

We will be using the jQuery Easing Plugin and some beautiful photos by tibchris.

The Markup

For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu:

<ul id="sdt_menu" class="sdt_menu">
	<li>
		<a href="#">
			<img src="images/1.jpg" alt=""/>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
		<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a>
		</div>
	</li>
	...
</ul>

If there is no submenu, the div can simply be left out. The image will not be shown in the beginning since we will set its width and height to 0 in the CSS.
Let’s take a look at the style.

The CSS

We will start by styling the unordered list:

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

Genrally, we want to remove any default text-decoration and outline for all the link elements in our menu:

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

Our list items will be floating left and have the position relative since we will want to use absolute positioning for the elements inside. If we wouldn’t set that, absolute positioned elements would be relative to the whole page:

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

The styling for the main link element where we have our two spans for title and description will be styled as follows:

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Notice the z-index: we will be defining a stacking order for all the important elements, so that the right ones stay on top.

We are using a background image that creates a glass like effect with a semi-transparent gradient. When you use some background pattern (like the wood in the demo) it creates a beautiful effect. Make sure to try out different textures – it just looks amazing!

You can also play with the shadows – changing the values to 2px 2px 6px #000 inset will give you a very nice effect.

The image will be styled as follows:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

We want to animate the image to come up from the bottom, that’s why we position it absolutely using “bottom” as reference point. We also add some neat box shadow. The first two values are zero, making the shadow spread evenly around the image. We used this as well in the link element. This even shadow can be used as a trick, whenever you want to create a light border effect. The advantage is that shadows are not really there – you don’t need to consider it in your width or height calculations in elements. The current disadvantage is that CSS3 is not supported in IE.

The wrapper for the title and description spans will have this style:

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

If you have some larger texts, you will need to adapt these values. Make sure that the adapted values fit well with the animation values in the JavaScript, too.

Next, we define the style for the gray box that slides down. We give it a height of 0 and position it already in a way that we just need to increase its height in the animation:

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

The common styles for the spans and links in the boxes will be the following:

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

The title and description will be styled as follows:

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

The submenu box will initially be hidden under the gray box. We will then animate it to the right or to the left depending on where we are. If we, for example, hover the last element, we want to animate that submenu box to the left, in all the other cases we want to animate it to the right.

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

The first link in the submenu should have a top margin:

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

And that’s all the style! Let’s add the magic!

The JavaScript

When we enter with the mouse on a list element we enlarge the image, and show both, the sdt_active span and the sdt_wrap span. If the element has a submenu (sdt_box), then we slide it to the side. If the element is the last one in the menu we slide the submenu box to the left, otherwise to the right:

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}	
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');
		
		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

And that’s it! We hope you liked this little menu and find it useful!

P.S. It looks very juicy in Google Chrome!

Message from TestkingJoin scdjws online training program to learn about jQuery plugins and become expert using scmad tutorials and scjp demos.

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 127

Comments are closed.
  1. WOW, great work.

    I am planning to use it on a website, but I have a question for you.
    How can I add multiple submenus (like a tree)?

    Thank you!

  2. One word – WOW! Will have to think of a new site to use this great slide-down-box-menu.
    Thanks!

  3. Very good but i try it but the opacity of the box-shadow is not very strong like your example.
    Nevertheless, i take the same code!!

  4. Love this tutorial and am planning to use this menu in a new site.
    I am finding though it conflicts with a slideshow on the site. Any advice on how I can avoid this?

  5. Thanks for a great work. It’s awesome!
    Just one suggestion. If you add this.style.zIndex=”500″ after line 2 and this.style.zIndex=”5″; after line 27 of javascript in index.html (in the mouseenter and mouseleave correspondingly) it will improve the behavior of animated image. It will not go under the right side menu item when zoomed.

  6. I have converted this menu into the google gadget, but in Internet Explorer it doesn’t display correctly. In other browser everything works great. Could you please have a look and give me any advise? I will really appreciate it.
    You can look at the gadget on http://www.returnyourtaxes.com page.

    Thanks!

  7. @Armen, hello!! not sure if u can help me with this, do you know how to make a submenu?? I’m implementing this menu on a site but don’t know exactly how to do it.

    I’ll appreciate your feedback

  8. Wow… tank you for much for this tutorial.. it has been reli helpful.. i’l be implementing it a A website m working on… all credit to you (^_^)

  9. It is currently aligned to the left. How would I be able to center this in the middle of the screen?

    thanks.

  10. This is really amazing.
    I tried your menu and links to open “light Box” content.
    The Light Box not working(Pretty light box). What have to to, Please help me.

  11. Brilliant, thank you so much for sharing. I am one of the bluntest knives in the draw πŸ™‚ but I got it to work. One question though if I may, my background won’t show in chrome or firefox

  12. Veeeeerrrrryyyy good job once again !

    for thoses interested by the old IE6, i made the line mentioned above disappear by adding this to the “ul.sdt_menu li span.sdt_active” css

    *display:none;
    *font-size:0px;
    *overflow: hidden;

    Don’t know if it’s the best solution or if well written but it works for me.

    cheers

  13. Hi, i made a page using your resourses. please check and comment πŸ™‚

    You are amazing and your articles are amazingly wonderful. Thank you so much.

    if u dont mind I would like to have some suggestion to my site. πŸ˜›

  14. Hey, awesum idea….n thnx for sharing dis coolest stuff…
    I tried to implement it on my website
    http://www.bhavanatrading.com/contactus
    page.

    The problem m facing is when u hover on contact the sdt component gets hidden behind the css. What might b the problem..
    Please help

  15. Hey, awesome tutorial and I am using it for designing a website. All the things are working fine but got stuck with a problem. I want to put a black background div section as the footer of my website but when I am inserting it, its appearing just behind the menu.

    Can you tell me where to insert the div tag for my footer section??? Please help me guys.

  16. Hi,

    Is there any way to use this dropdown menu in a blog from blogger?

    Thanks

  17. Hi, can you help with the sub-menu can not get to use it, also there is some transparency. I’ve applied using blogger:

    $ (function () {contents})
    but when I save the template it change to this:

    'width':'170px',
    'height':'100px',
    'left':'0px'
    before

    I await your response and thank you very much excellent menu and tutorial. Greetings.

  18. Hi, Great Menu!!! I am using it on a rather large ecommerce site and it looks great! I am wondering if anyone had incorporated second or third level sub-menus into this thanks! Feel free to respond to dan@gaiarendering.com

  19. Great code!
    The only issue I found is that if you don’t have javascript, you only can access the first level of the items.

    Triying to change it and then I will share it here.

    Thanks!

  20. Hi!

    really amazing menu, thx a lot!
    I have a question.
    when i will open links in a content or a table, the menu freeze. When i reload the site everything works again.
    Can somebody tell me, how i can fix this?
    I’m a neby and i build my first website.

    thx
    Vat

  21. Very beautiful! Really one of the best navigation I have even seen!

  22. Awesome!

    definitely one of the most beautiful Menus I’ve ever seen!
    would be honored to use it ..

    a question if I may ask:
    wt can I do to make all the submenus slide to the left?

  23. about my previous question, I found the solution :$

    thnx again for the great work!

  24. The best drop down menu effects i ever saw great tutorial bookmarked and share i implemented the menu on my website “http://www.mauseo.com” even though its not as cool as yours

  25. Hi,

    i created a slideshow just under the drop down menu and i have problem, because my submenus slide under (instead over) it(slideshow). Any solutions?

    Thanks

  26. Hi Mary Lou

    I have a question. I am web developer and I would like to use this menu in commercial use in my templates, and to use it in commercial purposes.

    Is this script free for use?

    If the script is free for use in commercial purposes, can you please send me your written permission?

    Of course, I will use my own images, and I will change the colors according the design on my templates.

    Regards, Zoran

  27. Sorry, I lost my mind today I guess…I didn’t wrote a single word how beautiful menu you create with so little code…awesome work.

  28. Hi Mary Lou, Fantastic script!!! But in IE9 the sub menu doesn’t work, when the main menu drop down the sub menu block any jquery on the page, Any ideas? thank you so much for the menu!

  29. Hi ML, great script! I would like to show more than 5 items in the sub menu’s, how would I go about this? Cheers!

  30. great tutorial im also tying to use fancybox with it but dosent seem like they work together.
    any ideas?
    seems like adding the fancy box the menus breaks the menus

  31. Hi Mary Lou!

    Congratulations for your excellent job with the menu but I noticed a little problem with IE7. It is breaking the sub menu topics in lines… take a look. Is there any way to solve this problem?

    Thank you in advance!

  32. Hello, first of all i like to thank you for this code. It inspired me to create an hompage for my own. Unfortunately I am a real noob in cooding. But with google it works to me! πŸ˜‰ But on problem i can not solve: how to center the navi??? I would be pleased if anyone can explain me that!

  33. Hi Mary Lou,

    Just wanted to say thank you for such a great navigation bar. I’ve messed around with it a little on my site. Hope you have the chance to take a look sometime.

    All the best,

    Rich