Jappler Recommends: jQuery

If you ever wanted to do something cool (slideshow, lightbox, accordion, pagination, table sorting, drop down menus etc) – please do yourself a favor and look at jQuery and all the great jQuery plugins that are available. About a year or two ago I really liked some of the different javascript libraries (YUI, prototype, etc) but over the last several months 99% of all my projects have required some sort of functionality that made me look at and then use jQuery.

Why jQuery? Unlike some of the other libraries, jQuery is very lightweight and does not suffer from a lot of bloat. You can also find a number of well documented plugins to do just about anything. You also have a great deal of UI controls and widgets that are available by using jQuery UI. Did I mention the documentation – it is really great. The learning curve is not steep – and once you do a few smaller projects – your comfort level with jQuery will skyrocket.

So next time you decide to do something to add some extra pizazz into your web site – remember, take a look at jQuery first!

jQuery + CSS + XHTML = Jappler Menus v2

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.

Jappler Menus in WordPress

Awhile back, I put something together (sons of suckerfish and sliding doors) and then was recently asked how to get this to work dynamically in WordPress.

The key to getting this to work dynamically is to first choose how you want to organize your site. I have done numerous sites based on categories and a lot also done using pages. Once you figure out what you want your menus to be driven from (page hierarchy or category hierarchy) you can then use some built in WordPress functions to dynamically fill out your menus.

For categories: you will want to use the wp_list_categories function
Example: (using the CSS and JS from the article I posted previously)

<div id="nav">
<ul>

</ul>
</div>

With that example, you can exclude certain categories, and their will not be a “Categories” text as the first level of the list. For more options, check out the wp_list_categories documentation.

For categories: you will want to use the wp_list_pages function
Example: (using the CSS and JS from the article I posted previously)

<div id="nav">
<ul>

</ul>
</div>

With that example, you can exclude certain pages, and their will not be a “Pages” text as the first level of the list. For more options, check out the wp_list_pages documentation.

There is also another option (plugins) I have used that extends both of those functions: Fold Category List, Fold Page List.