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.
This is great tutorial man. I was feeling difficulties regarding this type of nav bar menus but thank to you. I will share this with my blog readers also at Blogger Tricks.
dd
aa
half of a well designed website is for the way that menu navigation looks like, thanks
best
Great thing! I used FF to read the source code and was like: O.O!
For playing with it, i copied the SRC using FF…very nice menu you did there. Oh and where is the NotepadDesign? o.o
Hi,
Very good CSS menu. However there is a bug. When I click on a menu item I go to another page. When I comeback with browser back button I see the menu item is still open. I could not fix this bug, do you have any idea how to solve it?
Sahidul
nice post and a wonderful blog! love this theme!
regaeg
Great tutorial, thanks.
TIP: You can use SVG gradients to properly support rounded borders and IE…
excellent a jop.thank you it like.
We too use CSS to design drop down menus, rather than use Javascript. Haven’t tried this menu, however, it looks great.
Just for testing purpose… for example do we make two drop down menu in such a way that when user clicks on any of these they expand to show the further content. Clicking one shall not minimize the other ?
It is great, awsome. Try everybody who trying to generate a dinamic menu for your own site. It is very very simple to do.
Thanks very much……………….
Very nice drop down menu with pure css.
thanks…
nice menu. thank you.
I love your design and the menu of course is great!
I really appreciate you sharing this, you made it really easy to understand!
Here’s a quote for you
If you can’t explain it simply, you don’t understand it well enough.
Albert Einstein
You clearly understood it! :)
Great menu. I don’t see a link for downloading the source code?? Could you let me know where I can download it from?
click on the ‘VIEW DEMO’ button above, right-click on the resulting page, select ‘View source’ or words to that effect (depending on the browser you use).
… then click (or right-click) on the ‘style.css’ link.
Not found in ipad.
:-/ any ideas?
tranks
this is really nice … i wish you provide more CSS3 TUT’s if you can … really nice
this tutorial seems to be great and this CSS3 dropdown menu is really beautiful but i am just starting upmyself to update myself with html5 and CSS3 and having lots of confusions specially how i could use HTML5 and CSS3 with html 4 and CSS2. Can you please write on this topic?
and yeah thanks alot for this dropdown menu.. i will try to use it quite soon.