Feb 23
CSS3 Dropdown Menu
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.
WordPress Workshop: Zero to Hero Update: Social Media Icons
Comments
Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All
There are 167 comments (+Add)
Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All
Loading ...
167 jackcheng
August 31st, 2010 at 3:43 am
Click the “view demo” link . After entering the demo page rightclick and page save as…
166 Arturex
August 25th, 2010 at 7:07 pm
[TO:Leonard on comment 165] I believe the reason it hides the sub menu on ie7 its because is showing behind the image, did you try it without that image and perhaps playing with the z-index parameters
165 Leonard
August 23rd, 2010 at 6:59 am
Great menu! I love it.
One problem though: when inserting this menu into a html5 document it won’t work in IE7.
Check it out: http://kookerij.websitenodig.nl/menu-test.htm
Second link has a submenu, but stays hidden in IE7.
Anyone got a solution, besides changing the doctype?
164 DuJing http://www.dzxr.net
August 21st, 2010 at 11:19 pm
very good, very beautiful !
163 Lyplba http://www.ibinggan.cn
August 20th, 2010 at 7:48 pm
instensitiy or intensity ?!
162 CMMaung http://www.myanmarasp.net/
August 16th, 2010 at 12:15 am
very nice post! I appreciate it!
161 azman http://azman-sinoby.blogspot.com
August 13th, 2010 at 2:03 am
nice menu. i’ll try
thank you
160 ricky http://www.ricky.web.id
August 12th, 2010 at 2:33 am
adding this line to eliminate border when you click the link
* {
outline: none;
-moz-outline-style:none;
}
159 Chris CC http://www.cccgraphics.com
August 4th, 2010 at 10:43 pm
Where do i go to download the source code?
158 Chris CC http://www.cccgraphics.com
August 4th, 2010 at 10:43 pm
Awesome tutorial….but where do go to download the source code?