thb-hidden-menu

September 8, 2009

AJAX / Javascript, All, Freebies, HTML / CSS, jQuery, Menus

Hidden jQuery Drop Down Menu for Minimalist Design

Article written by Jeeremie

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.

Preview/Download

View DemoDownload(571.6 KiB, 7,545 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.

Screenshots

Navigation – initial state:
Hidden jQuery menu for minimalist desgin

Navigation – on mouseenter:
Hidden jQuery menu for minimalist desgin

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
1
2
3
4
5
6
7
8
9
10
<!-- 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
1
2
3
4
5
6
7
8
9
10
11
<!-- 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
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
<!-- 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.

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

Preview/Download

View DemoDownload(571.6 KiB, 7,545 hits)

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.

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

20 Comments

  1. Markus says:

    8 Sep, 2009

    nice menu ;)

  2. Simian says:

    9 Sep, 2009

    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. Juarez P. A. Filho says:

    9 Sep, 2009

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

  4. Jeremie Tisseau says:

    9 Sep, 2009

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

  5. Adeline says:

    9 Sep, 2009

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

  6. joyoge designers' bookmark says:

    10 Sep, 2009

    nice menu, thanks for share..

  7. Alberto Trussardi says:

    17 Sep, 2009

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

  8. windy abdurrahman says:

    21 Sep, 2009

    nice innovation, great menu.. thanks for share

  9. James says:

    23 Sep, 2009

    Hi Jeremie Tisseau,

    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

  10. Jeremie Tisseau says:

    23 Sep, 2009

    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
    1
    2
    3
    4
    
    // 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.

  11. Sushi says:

    3 Nov, 2009

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

  12. BadPuppet says:

    24 Jan, 2010

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

  13. Web Design Barnsley says:

    16 Feb, 2010

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

  14. technology says:

    8 Jul, 2010

    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?

  15. christian D'Elia says:

    3 Aug, 2010

    Hello,
    this is a nice stuff!!
    i need help to do this kind of vertical menu,
    like this: http://www.arsondpi.gr/

    any suggest is welcome!!!

  16. Kan says:

    2 Nov, 2010

    hi, love your works. Will these codes work on my wordpress 3.1? I’d like to have a drop down menu in my blog… please advice. Welcome to Thailand and hello from Chiang Mai :)

    • Jeeremie says:

      4 Nov, 2010

      Sawasdee Kap! Normally it should work fine with WordPress 3.1.

  17. Noida says:

    21 Nov, 2011

    Like the menu but color combination is not so interesting also what if a person did not hovered on title ? then he she will not be able to access the site better if a sign like click here on may site should be used to at least make the user aware of something there rest all is perfect like this post :)

  18. Matbaa says:

    15 Dec, 2011

    Nice tutorials thank you..

Leave a Reply

Sorry, comments are closed