Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I'm not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:

• Cross-browser compatible (even IE 6)
• Multi-level and retains "trail"
• Very minimal styling (easy to adapt)
• Very minimal JavaScript (short bit of jQuery)

I think it worked out pretty well. All my testing shows them working pretty well. Please let me know if you find any problems and we can try to address them. There was only really one CSS tweak needed for IE, which was to use inline-block on the submenu list items to prevent the weird spacing pseduo-line-break IE likes to do.

Each "level" is clearly marked in the CSS file, so it should be pretty easy to identify what is what and apply your own custom styling.

hoverIntent

The demo and download comes with two "versions", one with hoverIntent and one without. I couldn't decide which one I liked better so I just left both in. On one hand, hoverIntent is nice because it prevents the menus from opening if you just quickly mouse over them (like the mouse just happened to cross them but you clearly weren't intending to use the menu at that time). On the other hand, it makes the menu feel a bit sluggish.

Great CSS Menu Tutorials

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Lets create the html used.

1. <div class="wrapper">
2. <div class="container"><ul class="menu" rel="sam1">
3. <li class="active"><a href="#">Home</a></li>
4. <li><a href="#">About</a></li>
5. <li ><a href="#">Blog</a></li>
6. <li><a href="#">Services</a></li>
7. <li><a href="#">Portfolio</a></li>
8. <li><a href="#">Contacts</a></li>
9. <li><a href="#">Twitter @insic</a></li>
10. </ul>
11. </div>
12. </div>

Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.

1. .wrapper {
2.     width: 100%;
3.     height: 80px;
4.     background : #464646;
5.     background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
6.     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
7.     border-top: 2px solid #939393;
8.     position: relative;
9.     margin-bottom: 30px;
10. }

The CSS code for the menu item.

1. ul {
2.     margin: 0;
3.     padding: 0;
4. }
5.  
6. ul.menu {
7.     height: 80px;
8.     border-left: 1px solid rgba(0,0,0,0.3);
9.     border-right: 1px solid rgba(255,255,255,0.3);
10.     float:left;
11. }
12.  
13. ul.menu li {
14.     list-style: none;
15.     float:left;
16.     height: 79px;
17.     text-align: center;
18.     background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
19.     background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
20.     }
21.  
22. ul li a {
23.     display: block;
24.     padding: 0 20px;
25.     border-left: 1px solid rgba(255,255,255,0.1);
26.     border-right: 1px solid rgba(0,0,0,0.1);
27.     text-align: center;
28.     line-height: 79px;
29.     background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
30.     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
31.     -webkit-transition-property: background;
32.     -webkit-transition-duration: 700ms;
33.     -moz-transition-property: background;
34.     -moz-transition-duration: 700ms;
35.     }
36.  
37. ul li a:hover {
38.     background: transparent none;
39. }
40.  
41. ul li.active a{
42.     background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
43.     background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
44. }