While I was coding the Notepad theme, I've learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Preview
The image below shows how the menu will look if CSS3 is not supported.
One Gradient Image is Used
A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.
The instensitiy of the gradient can be changed by shifting the background image up or down. Also, the gradient color can be easily adjusted by changing the background color.
CSS Code
I'm not going to explain the CSS line by line. The images below explain the key points on how this dropdown is coded.
Update Apr 13 2010: Pure CSS Dropdown (No Image Used)
The following demo used CSS gradient and IE gradient filter instead of the gradient image. It works for Webkit browsers, Firefox 3.6+, and IE.
Your none image version isn’t working to display the sub level navigation (hover over N.Design Studio, the flyout is hidden) in IE7. The image one is working in IE7 to display this. I’ve compared your css and other than the image, there isn’t any difference (that I saw). Any chance you know what it is? I’d like to use this, but IE7 is still a widely used browser so I’d like it to render properly there as well. Any help would be greatly appreciated.
I HATE using Word for this kind of effect. It’s extremely limiting. I just completed an assignment for a set of wedding banquet place cards. The bride had already bought a set of those preforated sheets to run on a desktop printer.
She had the guest list on an Excel document and wanted to use Word’s “Mail Merge” labeling feature to run them off. That would have been fine, except that she wanted a particular color for the font, and a specific color and offset for the drop shadow. I couldn’t get the effect needed from Word’s “Word Art” feature.
So, I ended up, after wasting a lot of time showing her the problems, doing it in InDesign. I knew that appication well enough to do a quick template layout and running text boxes for me to place the names, with my “style sheets” to automatically add the drop shadow effect we wanted.
No criticism of you intended, but I will point out, again, that designers have a LOT of different applications to do their job. Photshop is good for some things. Illustrator for others.
Still others for InDesign, Word, Excel, Flash, Dreamweaver and so on. The more in my “tool box” the better I can do different jobs. As I like to point out, by analogy, one CAN drive a nail with the flat side of a box wrench, but a hammer does a better job of it.
Hi, fantastic article! I’ve just made a GUI wizard to create menus based on your ideas, please take a look at http://css3menu.com/. Also I added some nice Android-style menus. Would be great to hear any comments!
Thanks!
Excellent tutorial that I use on many sites.
Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.
very good!
its not working in the IE. pls help
Hi,
It’s a great demo, however like Hutch, i found that your non-image or pure CSS3 version does not work in IE7. The sub menus do not show at all unfortunately. Any advice on this would be appreciated.
Thanks.
Nice css dropdown menu, but what about adding a simple dropdown effect?
This is “CSS3″ Dropdown Menu , IE7 does not support CSS3 very well.. upgraded to IE8+ ..
hello, I constructed a similar menu for a couple of years ago for a graphic design studio and works on all browsers, you can see here http://www.elojodelhuracan.com (html version)
Hey Pariuri-
I sure hope you used dynamic data fields in your InDesign template to import that Excel file and avoid having to type all those names!
I agree, there are many tools for us designers and many functions within each.
wow, very interesting post… a little different to me… T^T
not bad. in my opinion the appearance of the drop down is a bit fast. you can slow it down at least in safari with the duration transition (-webkit-transition-duration: 1s;) introduced here: http://bit.ly/1cEnxH.
love the design of your website!
The following jquery script uses the same CSS functions to make the corners for the CSS3 browsers, but also uses an other way to make corners for the ones (like IE) to make corners to.
http://www.malsup.com/jquery/corner/
have fun ;)
@Rod/@Sneha – This won’t work in MSIE 7 and lower as these attributes aren’t available. You will have to provide some other kind of menue if you need to support those browsers. You could also look at trying something like Modernizr.js or eCSStender to push those browsers to mimic CSS3 attributes.
Awesome resource (and, awesome site design too… you rock :) ).
One question, will the CSS3 + Image version work on IE-6/7?
(I dont mind if fancy stuff does’t work, will the basic dropdown stuff work on IE6/7?)
thanks
Janak
Hi,
great work on this menu but I use a HTML 4.01 Transitional doctype and while its working perfect on Chrome & Firefox, it’s not working on IE8.
I’m not well informed about those doctypes stuffs so am I missing something here ? or is it only compatible with XHTML docs ?
Thanks.
your work is very nice zacariaslavin (I’ve seen in safari)