Hidden jQuery Drop Down Menu for Minimalist Design
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
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:
Navigation - on mouseenter:
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.
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.
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>↑ 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.
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>↑ MENU</small> </div> <div class="nav-enabled"> <ul class="nav"> <li>Navigation →</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>↓</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>↓</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 »</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:
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
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
Want to become a guest author on this blog?
Markus says:
8 Sep, 2009
nice menu
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?
Juarez P. A. Filho says:
9 Sep, 2009
Wow… This menu is TErrific and simple to implement.
Well Done and thanks to share.
Jeremie Tisseau says:
9 Sep, 2009
@simian, you were right and I changed it. See the updated code.
Adeline says:
9 Sep, 2009
Looks great, will have to try it out very soon, thanks!
joyoge designers' bookmark says:
10 Sep, 2009
nice menu, thanks for share..
Alberto Trussardi says:
17 Sep, 2009
ITA: Ottime risorse! Grazie per la segnalazione!
ENG: Nice post Jeremie Tisseau! Thanks for the resources!
Jeremie Tisseau says:
17 Sep, 2009
windy abdurrahman says:
21 Sep, 2009
nice innovation, great menu.. thanks for share
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
Jeremie Tisseau says:
23 Sep, 2009
Yes. The code to trigger the panel open is:
Replace ‘.click by ‘.mouseenter and it should work.
Make sure you call jquery-1.3.2.js only once in the head of your document.
Sushi says:
3 Nov, 2009
Useful article. I might try it when i have time. Thanks for sharing.
BadPuppet says:
24 Jan, 2010
I love your work. You have inspired me with your fantastic use of jquery!
Web Design Barnsley says:
16 Feb, 2010
Love it Love it Love it, will have to try this out very soon, Thanks
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?
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!!!
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.
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
Matbaa says:
15 Dec, 2011
Nice tutorials thank you..