Guest Post – Sexy Drop Down Menu
Blog » CSS/XHTML, Personal » Guest Post – Sexy Drop Down MenuGuest Post – Sexy Drop Down Menu
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.
Similar Posts:
Tags: guest post, jQuery, navigation
This entry was posted on Tuesday, June 2nd, 2009 at 3:11 pm and is filed under CSS/XHTML, Personal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.







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”)