As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, People usually add the effect using some images but this example that one using pure CSS.
Drop Down Technique
To create drop down menu like the demo we can use a div for the menu container and an unordered list for the menu. Wrap the unordered list on the div and hide them, we’ll only show the menu when user hovering the div.
As you mention above, the unordered list (the menu) is hidden, positioned inside the div and under the text “Please choose following menu”. So when the user hover the menu container the menu will have sub menu below it.
The Object and Its Style
As I said above the menu container will contains unordered list as the menu, so we will wrap the unordered list with the div :
The important thing is we must fixed the menu container’s height (class name : drop-menu) so no matter how much list (class name : sub-menu) element inside, its height will not change. We can also make it more cute by set up its padding, font size, border and also the cursor property.
We need an hover event in the menu container for showing up the menu, we can use CSS pseudo-class :hover. Since we want to show the menu by menu container hover event we can use CSS nesting :
Next is styling the menu, set its width, background and padding equal to its parent. Add a shadow effect by setting its box-shadow property, set x-axis to 0px, y-axis to 13px, blur to 25px and shadow color to black with 20% alpha. This will make the shadow has a gradient effect.
We also will add a little animation to the plus symbol, if the user hovering menu container we will rotate the plus symbol into 45 degree so it will transform into crosswise.
Wrap them up :
That’s it, we have made simple drop down menu using pure CSS. By using CSS3 properties we can tune our element into another level and also we can minimize the use of images.
- jQuery image AdSense(Image Tips)
- The Simplest jQuery Tooltip Ever
- Image Preview Gallery
- Links With URL Preview
- Animated Navigation Menu From Stratch jQuery
- Nice Menu : CSS Animation & jQuery Animate
- Simple unlimited levels vertical drop
- Beautiful red vertical glide navigation menu jquery plugin
- jQuery Menu: Dropdown
- DropDown CSS Menu
Recommended Web Hosting For Bloggers and Designers
I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.
- Fast, Reliable, Affordable
- 100% Satisfaction Guarantee
- And More...