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.
Very impressive! I went to the demo and did “view source” and was totally blown away by the simplicity and elegance of the HTML and CSS with no JS. Thanks for teaching me a bunch of tricks in one article. The “gradient image” trick is particularly inspiring.
Bring on CSS3 compatibility and the death of IE6 market share…
Nice work. Only one thing missing “hoverIntent”. Having hover intent on to this will make it look really great.
Regards,
GeekTantra
Impressive, Nick. I love that fact that it still looks so great even in faulty browsers, and even sleeker in CSS3 compatible agents. I’m excited to use this in my next project!
It looks good in the non supporting browsers also :-)
Great article very well explained. Thanks for high-value examples.
Nothing does not exaggerate. All round. It is not nice, soory.
good post… i am trying still get my head round everything
Iria: For IE6, you could use a separate stylesheet, with a completely different look. Make it look like crap. Make IE6-user wish for a better browser :)
Wow….My heart is too full for words. It work Fantastic Skill!
Wow… Nice Post… I got in Correct Timings… Thx Nick
Nicely done. I’m going to experiment with this puppy.
Thanks, I really like the gradient over a solid color trick… gonna have to use that now
Its cool but its wrong…
the itens with have drop down subitens must be flaged as that.
I think the concept of this is similar with sucker fish…
This is so cool. Your post inspired me to create a variation in the form of a horizontal drop line menu: http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Opera 10.50 beta shows the blue background color of the selected menue entry not in rounded corners like Firefox, Safari or Chrome.
In your code is something missing. ;)
If you change the CSS for first-child and last-child the menue does work correctly in Opera 10.50.
#nav ul li:first-child > a {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
Kind regards from germany
GwenDragon
hi Friends
what is your website worth?
free check here…
…………………………………………….
websitereckon.com
………………………………………………….
thanks
From what i read, currently only few browsers supporting CS3. That means, those major browsers should be. Worth to try over. Anyway, excellent design there you have. Keep sharing. Thanks in advance!
Another hacks to bring this script in Opera 10.50:
/* main level link */#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 1.6em; /* This was added */
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; /* This was added */
}
#nav ul a:hover {
background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; /* This was added */
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
With this in mind, the script works perfect in Opera 10.50
Greetings!
Oh.., full-creative!!!
Thanks Nick