jQuery + CSS + XHTML = Jappler Menus v2

CSS HOWTOs HTML/XTML Javascript Web Development

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.

6 thoughts on “jQuery + CSS + XHTML = Jappler Menus v2”

  1. Ben

    There are few things I find more irritating that a site that has sketchy (I call em popup menus in general) drop down menus. You know the kind that you mouse out of the magical area that is still menu land as you’re navigating 20 sub-menus deep and lose all that progress. These are very nice, I like it a lot, especially for the fact that it highlights the entire area of the menu item you’re on atm and you know you’re in it. Awesome work! 😀

  2. Jennifer Zelazny

    Yeah – I agree. In general I am not a huge drop down fan because of exactly what you said. They tend to be more frustrating than anything, but I think these are pretty easy and stress-free. 😉

  3. Vincent

    Very impressive, previously mentioned about WordPress would it be similar to implemet in joomla 1.0 using extended menu perhaps?

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

CSS Web Development WordPress

Quick CSS for WordPress Images (Updated)

A week or so ago, I posted some information on how to quickly style your WordPress images. After recently updating my company’s web site (SDAC Inc. – I noticed if you used captions, my custom CSS would not work. Here is some CSS that will work with and without image captions: .alignright, .aligncenter, .alignleft {padding:4px;background:#ecece2;border:1px […]

CSS Hints HOWTOs HTML/XTML jappler.com Web Development WordPress

Quick CSS for WordPress Images

If you install WordPress and use the media uploader to manage your images in your posts – you can easily style your images quickly by adding the following code to your theme’s stylesheet. img.alignright, img.aligncenter, img.alignleft {padding:4px;background:#efefef;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;} img.alignright {float:right;margin-left:5px;} img.alignleft, img.alignnone {float:left;margin-right:5px;} img.aligncenter {display: block;margin-left: auto;margin-right: auto;} This code […]