Previously – I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).
Since writing that post – I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes – that would be a much nicer way to work with menus. For this – I give you Jappler Menus version 2.
Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/
There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.
- The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a> <ul> <li><a href="#">Our Story</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Our Philosophy</a></li> </ul> </li> <li><a href="#">Our Products</a> <ul> <li><a href="#">WordPress Themes</a></li> <li><a href="#">WordPress Plugins</a></li> <li><a href="#">WordPress Consultation</a></li> </ul> </li> <li><a href="#">HOWTOs</a> <ul> <li><a href="#">bbPress</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">General</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">XHTML</a></li> <li><a href="#">Javascript</a></li> </ul> </li> </ul> </li> <li><a href="#">Archives</a></li> <li><a href="#">RSS Feed</a></li> </ul>
- The javascript that makes the drop downs fade in and out. This uses jQuery and then some custom JS that takes care of our menu:
function japplerMenu(){ $(" #navigation ul ").css({display: "none"}); // Opera Fix $(" #navigation li").hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(200); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); } $(document).ready(function(){ japplerMenu(); });}
- The CSS to make things look pretty.Here is the custom CSS that is needed:
#mainNav {height:30px;background: url('images/mainNav_bg.gif') repeat-x;width:623px;} #navigation, #navigation ul{position:relative;z-index:1000;list-style-type:none;list-style-position:outside;margin:0;padding:0;} #navigation a {display:block;padding:0 20px 0 20px;font-size:1.1em;font-weight:bold;color:#fff;text-decoration:none;line-height:30px;} #navigation li:hover {background: url('images/mainNav_bg-over.gif') repeat-x;} #navigation li:hover a {color:#fff;} #navigation li{float:left;position:relative;} #navigation ul {width:165px;position:absolute;left:-1px;top:29px;display:none;background:#f1f4f2;border:1px solid #4b4d5b;border-bottom:none;} #navigation li:hover li a {color:#333;} #navigation li ul a {float:left;width:155px;line-height:normal;font-weight:normal;font-size:.95em;text-align:left;border-bottom:1px solid #4b4d5b;background:#f1f4f2;height:auto;padding:5px;} #navigation li ul a:hover {background:#a4a5a9;color:#000;} #navigation ul ul{top:auto;} #navigation li ul ul {left:160px;margin:0;} #navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul{display:none;} #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{display:block;}There is also some additional CSS for IE 6. (See IE 6 specific CSS). You can add some conditional logic to include this for only IE 6 (See the example source above – look in the header for the conditional code.)
These menus are compatible with IE 6+, Safari 2+, Opera 9+, and FF 2+. If you want it to work in IE 6 – I have a start on some CSS that will make it work.
