Not a member? Register | Lost your password?
Close Panel
 
 

8

Sep

2009

Hidden jQuery Drop Down Menu for Minimalist Design

By jeeremie. Posted in AJAX / Javascript, HTML / CSS

When I work for my clients, I always try to figure out the best way to organize content and hide elements that doesn’t require immediate action to clean up the page a little bit while making sure to give the best user experience.

A while ago, I started to sketch a few menus in my notebook. I wanted a menu that would be minimalist – almost invisible – but still accessible, some kind of button or maybe a link that would open the menu. I started to think where would be the best place to put it. In the upper left corner? The right one? Next to the logo? And why not the logo or title itself?! That’s it. Users are most likely to hover the logo or header, right? That made the most sense.

That was now time to roll my sleeves up and see how to implement this. After a few hours and some headaches, I came up with a nice hidden jQuery Drop Down Menu.

Here’s how it works. When user put his cursor over the header, the script hides the logo/title and reveals the navigation along with a search bar (not functional in this demo). When user leaves the menu, navigation fades out after 3 seconds and logo/title comes back.

But enough talks, see for yourself: DEMO »

Navigation – initial state:
Hidden jQuery menu for minimalist desgin

Navigation – on mouseenter:
Hidden jQuery menu for minimalist desgin

Download
Download (571.4 KiB, 1,200 hits)

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: HTML

We need to create two containers inside our header: “nav-disabled” and “nav-enabled”. By default, “nav-enabled” is hidden. This will be the container for our navigation.

?View Code HTML4STRICT
<!-- Our demo Starts Here -->
<div id="header" colla="-">
	<div class="nav-disabled">
		[LOGO OR TITLE HERE]
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

Add your logo. For this example, we are only going to use plain text but feel free to replace it by anything you want.

?View Code HTML4STRICT
<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

Finally, create an unordered list for your top navigation. Then simply nest another unordered list for your sub-navigation. My jQuery script only allows for a two level navigation which I think should be enough in most cases.

?View Code HTML4STRICT
<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		<ul class="nav">
			<li>Navigation &rarr;</li>
			<li><a href="http://web-kreation.com">Home</a></li>
			<li><a href="http://web-kreation.com/index.php/services">Services</a>
				<ul class="dropdown">
					<li>&darr;</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/category/portfolio">Portfolio</a></li>
			<li><a href="http://web-kreation.com/index.php/blog">Blog</a></li>
			<li><a href="http://web-kreation.com/index.php/about">About</a>
				<ul class="dropdown">
					<li>&darr;</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/contact">Contact</a></li>
			<li><a href="http://web-kreation.com/index.php/articles/hidden-jquery-drop-down-menu-for-minimalist-design">Go Back to Article &raquo;</a></li>
		</ul>
		<small>Pretty cool this menu, huh? You could replace the title by your own logo, an image... anything you want really. This menu will fade out after 3 seconds. Seach bar is not functional. This is just a demo.</small>
		<form method="get" id="search" action="">
			<input class="search-input" type="text" value="" />
			<input class="search-submit" type="submit" value="SEARCH" />
		</form>
	</div>
</div>
<!-- /END DEMO -->

That’s it for the HTML.

Step 2: CSS (minimalist-menu.css)

Next, style your header and navigation with CSS.

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

body {
    font-size: 80%;
}
 
#header {
	padding: 40px 40px 0;
	clear: both;
  	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
#header a {
	text-decoration: none;
}
 
#header small {
	color: #999;
	font-size: 0.8em;
	margin-top: 5px;
	float: left; 
	width: 600px;
	padding-left: 10px;
}
 
#header .nav-disabled, #header .nav-enabled {
	display: block;
	clear: both;
	height: 70px; /* Fixed height to make sure navigation doesn't flick on mouseleave - set it to anything you want */
}
 
#header .nav-disabled h1 {
	background: url('../images/ui-menu-disable.png') no-repeat 6px 3px;
	padding-left: 26px;
	display: block;
	height: 21px;
	padding-top: 3px;
	color: #709A71;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
ul.nav {
  	display: block;
	border: 1px solid #E6E6E6;
	text-transform: uppercase;
	height: 22px;
	background: #F3F3F3 url('../images/ui-menu.png') no-repeat 5px 3px;	
	padding-left: 20px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 
ul.nav li {
	display: block;
	float: left;
	height: 12px;
	padding: 5px 10px;
	border-right: 1px solid #E6E6E6;
	color: #666; 
	position: relative;  
}
 
ul.nav li a {
	color: #666; 
}
 
ul.nav li a:hover {
	color: #333; 
	text-decoration: none;
}
 
/* Subnav */
ul.nav li.btn a {
	background: url(../images/subnav_btn.gif) no-repeat right 4px; /* add arrows next links when subnav exists */ 
	padding-right: 20px;
}
 
ul.nav li.btn a:hover, ul.nav li.hover {
	background-position: right -35px;
}
 
ul.nav li ul.dropdown {
	display: none;
	list-style: none;
	position: absolute;
	float: left;
	left: 0; 
	top: 22px;
	width: 160px;
	background: #F3F3F3;
	margin: 0; 
	padding: 0;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
}
 
ul.nav li ul.dropdown li {
	margin: 0; 
	padding: 0;
	border-top: 1px solid #E6E6E6;
	clear: both;
	height: 14px;
	width: 139px;
	padding: 5px 10px;
	display: block;
}
 
ul.nav li ul.dropdown li a {
	text-transform: none;
	background: transparent!important;
}
 
html ul.nav li ul.dropdown li a {
	float: left;
}
/* Search Form */
#header #search {
    background: transparent url('../images/search.gif') no-repeat 0 0;
    height: 20px;
    width: 240px;
    float: right;
	margin-top: 5px;
	padding-right: 10px;
}
 
#header .search-input, #header .search-submit {
    background: transparent;
    border: none;
    float: left;
	color: #999 !important;
}
 
#header .search-input {
    padding: 2px 6px;
    width: 170px;
}
 
#header .search-submit {
    cursor: pointer;
    padding: 3px 0;
    width: 56px;
    font: 0.85em Georgia, "Times New Roman", Times, serif;
}
Step 3: JS (minimalist-menu.js)

This menu requires jQuery 1.3.2 and jquery.event.hover.js from Three Dub Media.

Below is the code that will do all the magic:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

// ##################################
//Variables
// YOU CAN EDIT BELOW
 
var navFadeOutDelay = 3000; // Set delay for drop down to slide down (in ms)
var slideDownDelay = 200; // Set delay for drop down to slide down (in ms)
 
 
// DO NOT EDIT BELOW THIS LINE
// ##################################
 
 
 
$(document).ready(function(){
 
	// Plugin: Delay
	// http://tech.apt.no/2009/04/01/delay-in-jquery/
	(function($){
		jQuery.fn.delay = function(millis,callBack){
			var object = $(this);
			$.extend(object,{callBack:callBack});
			return window.setTimeout(function() {
				object.callBack();
				return object;
			}, millis);
		}
	})(jQuery);
 
 
	// Navigation:
	// requires jquery.event.hover-1.0 plugin : http://blog.threedubmedia.com/2008/08/eventspecialhover.html 	
	var nav = {count:0};
 
	$("#header .nav-enabled").hide(); //hide navigation on page load. 
	$(function(){
		$('#header').bind('hover',function(){ // On mouseenter, hide title and show navigation
	        $("#header .nav-disabled").hide();
	        $("#header .nav-enabled").fadeIn();
			nav.count += 1;
		}).bind('hoverend',function(){ // On mouseleave, fade out navigation and show title
			var tmp = nav.count;
			$("#header .nav-enabled").delay(navFadeOutDelay, function(){ // Delay: wait X ms before navigation FadeOut                
                if (tmp == nav.count) { // prevent delay from firing if user hovers navigation before the end of delay
			        $(this).fadeOut('slow', function(){ //Callback					
						$("#header .nav-disabled").show(); 
					}); 
                }				
		    });   
		});
	});
 
 
	// Drop Down Navigation
	$("ul.dropdown").parent().addClass("btn"); // hide sub-navigation on page load and adds class to li in topnav
 
	$("ul.nav li.btn").hover(function() { 
		$(this).find("ul.dropdown").slideDown(slideDownDelay).show(); //Slide subnav down on mouseenter
	}, function(){
		$(this).find("ul.dropdown").slideUp('slow'); //Slide subnav up on mouseleave
	}); 
 
 
});
Conclusion

The menu is really simple and should be easy to customize as it only makes use of CSS (no images except for the menu icon). I have added rounded corners to the demo with CSS3. However, this is only supported by Firefox, Chrome and Safari. If your site needs to be CSS compliant, I recommend you remove the CSS code from line 50 to 53 (in CSS code above).

This menu has been tested in IE6+, FF3.5, Opera 10, Safari 4, Chrome 2 in Windows XP only. If you find a bug or have a suggestion, concern, feedback… leave your comments below and I will make my best to answer you.

The template used for this demo was inspired from my Pignews theme (coming soon!). Use this template as you wish but just please give me credits.

Popularity: 7% [?]

 
« Previous Post
Next Post »

Related posts

| Subscribe to Feed | Email the author

18 Responses to “Hidden jQuery Drop Down Menu for Minimalist Design”

  1. 1
    Markus Says:
    September 8th, 2009 at 8:43 pm

    nice menu ;)

  2. 2
    Simian Says:
    September 9th, 2009 at 12:16 am

    Thanks, that’s pretty sweet. One thing though, it’s such a fast/hard transition when the menu reveals itself. What would you do to make it a softer transition on the reveal, like a fade-in effect, like you do on the fade out?

  3. 3
    Juarez P. A. Filho Says:
    September 9th, 2009 at 9:08 am

    Wow… This menu is TErrific and simple to implement.
    Well Done and thanks to share.

  4. 4
    jeeremie Says:
    September 9th, 2009 at 9:57 am

    @simian, you were right and I changed it. See the updated code.

  5. 5
    Adeline Says:
    September 9th, 2009 at 10:53 am

    Looks great, will have to try it out very soon, thanks!

  6. 6
    Hidden jQuery Drop Down Menu for Minimalist Design | Choose Daily Says:
    September 9th, 2009 at 8:58 pm

    [...] Hidden jQuery Drop Down Menu for Minimalist Design [...]

  7. 7
    joyoge designers' bookmark Says:
    September 10th, 2009 at 5:17 am

    nice menu, thanks for share..

  8. 8
    Mes favoris du 8-09-09 au 10-09-09 Says:
    September 10th, 2009 at 2:12 pm

    [...] Web-kreation – Hidden jQuery Drop Down Menu for Minimalist Design  [...]

  9. 9
    Alberto Trussardi Says:
    September 17th, 2009 at 2:49 pm

    ITA: Ottime risorse! Grazie per la segnalazione!
    ENG: Nice post Jeeremie! Thanks for the resources! ;)

  10. 10
    jeeremie Says:
    September 17th, 2009 at 3:07 pm

    :)

  11. 11
    jQuery: tutoriales y recursos para nuestros diseños web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog Says:
    September 20th, 2009 at 2:53 pm

    [...] Ver el tutorial [...]

  12. 12
    windy abdurrahman Says:
    September 21st, 2009 at 8:29 am

    nice innovation, great menu.. thanks for share

  13. 13
    James Says:
    September 23rd, 2009 at 1:05 am

    Hi Jeeremie,

    Really like your javascript work. I was wondering, would it be possible to combine this with the Sliding Menu (http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/)??

    So instead of clicking on the login big you can simply hover over it in order to trigger the slide?

    I have tried implementing the sliding menu onto a website i am working on but it stops working when i add the Cycle plugin for a photo gallery i am adding below the menu (http://malsup.com/jquery/cycle/)… any idea why this would be happening?

    Thanks,
    James

  14. 14
    jeeremie Says:
    September 23rd, 2009 at 10:17 am

    So instead of clicking on the login big you can simply hover over it in order to trigger the slide?

    Yes. The code to trigger the panel open is:

    ?View Code JAVASCRIPT
    // Expand Panel
$("#open").click(function(){
  $("div#panel").slideDown("slow");	
});

    Replace ‘.click’ by ‘.mouseenter’ and it should work.

    I have tried implementing the sliding menu onto a website i am working on but it stops working when i add the Cycle plugin…

    Make sure you call jquery-1.3.2.js only once in the head of your document.

  15. 15
    Sushi Says:
    November 3rd, 2009 at 11:22 pm

    Useful article. I might try it when i have time. Thanks for sharing.

  16. 16
    ..still try and try.. » Blog Archive » 10 Beautiful jQuery Menus Says:
    January 20th, 2010 at 9:41 am

    [...] 10 Beautiful jQuery Menus 0 Comments Hidden jQuery Drop Down Menu for Minimalist Design Demo | Tutorial [...]

  17. 17
    BadPuppet Says:
    January 24th, 2010 at 10:11 pm

    I love your work. You have inspired me with your fantastic use of jquery!

  18. 18
    Web Design Barnsley Says:
    February 16th, 2010 at 8:02 pm

    Love it Love it Love it, will have to try this out very soon, Thanks

 

Leave a Reply

Wrap all code in <pre lang="LANGUAGE" colla="-">...</pre> and replace 'LANGUAGE' by 'html4strict' for HTML, 'php', 'javascript', 'css'...