jappler.com

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.

1. 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>
   

2. 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();
   });
   

   }

3. 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.