Guest Post – Sexy Drop Down Menu
Tags: Guest Post, Intermediate, Navigation
I recently wrote a tutorial on creating a jQuery driven drop down menu on www.Noupe.com.
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment29 Peeps Have Spoken Their Minds...
Good work man! Great post on a great site. Keep it up.
very sexy~
Beautiful! I really like this style of drop down menu.
That’s a really nice navigation, great look and feel.
woow. more than sexy man!
Those are gorgeous menus! The only downside is that degrading loses the submenu links – if you implemented a CSS feature that would still show those links, that would be awesome.
That very well.:)
great. well done. love it. 5*****. keep sharing.
wow really nice menu 5*****
but i think it work only for 2 levels menu what about 3 levels or more
Could you show a version with 3 levels of menu?
thanks
Hello. I have one problem. How can i change the height of the submenu?
where or how can i get the background images used in the menu. the white top shadow that appears when hovering etc.
Cool sexy menu + a great website!
A great site.
Hi, very nice menu
Any way to get it without transition XHTML error?
Line 10, Column 39: document type does not allow element “span” here
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements — such as a “style” element in the “body” section instead of inside “head” — or two elements that overlap (which is not allowed).
Yea I wrote on page js so its easy to scan through, if you call the js file externally, you won’t get that error~
Excellent i will try !
Really thanks for your work, all is fine and usefull!
Hi,
Congratulations for your funtastic site, and to share with us your knowledge.
Do you have any sample with more than 2 levels menu. It will be great if you do not have this kind of limitation.
First thank for this very lovely menu.
I try to customise it for one of my projects by I have few problems.
I put an image-background on each li of the ul.tonav with an id to get un kind of rollover effect. The problem is that my background is repeated in the dropdown menu even if I mention no-repeat in the css.
Also in safari the background image doesn’t appear.
I hope than you can help me and that you have the time to fix that problem.
Thank you.
woow,it’s cool
I love all ur tutorials. U are so smart, luv ur talents, luv u .. muahzz…
Hi,
Great idea :)
I’m trying to to validate and there is error with tag in headers.
I also tryied to revalidate your example page, and still there is error:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sohtanaka.com%2Fweb-design%2Fexamples%2Fdrop-down-menu%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654
Also tryied to create JS variable like:
sSpan = ” + ”
$(document).ready(function(){
$(“ul.subnav”).parent().append(sSpan);
But error again :(
Do You have some other solution?
Thanks in advance
Hm… No html code in comments :)
But something like:
sSpan = (left) + sp + an + (right) + ‘/sp’ + ‘an’
Hey, I love the menu, but had issues trying to put the css code in to a css file to get to work before I made design changes.
Thanks for the great examples thru out the site.
Me again… i found solution for using brackets inside header, based on Googles Analytics:
unescape(“%3Cspan%3E”)
I managed also to get the hover (rather than click) functionality, but struggling to get the parent list element to remain highlighted when hovering child elements.
Ideally the menu would have an active parent list background as well as a hover background (which remains as you hover the subnav)
Can this be done purely with the css? Or do we need more jquery to make it all work in ie6 as well?
Don’t be shy… Speak up!hi,this site is the most beautiful thing i’ve ever seen.i’m a beginer and i’m learning a lot here, thanks a lot for share .One more thing,i’m trying this beautiful menu in a page and i would like that you or someone help me about a problem i have.In subnav i set background: #004070; i need some help to make the bewel effect with border-top:? and border-botton:?.I need some lights ,please, thanks.(sorry about my english).
thx alot dude…nice article and tutor…really helpful for my web application today
I read this article, but couldn’t find a way to download the files. Would you mind pointing me in the right direction?
Good work man!
Speak Your Mind...