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.

Jappler Recommends: Smooth Gallery

I have needed a good solution for a “cool” image gallery/slideshow for a few clients and have been very happy with Smooth Gallery. Why do I like this over something else from YUI or jQuery? I think this is by far the most easy to use and customize gallery/slide show. The documentation is clear and easy to read, and adding or changing parameters is extremely easy and clear. The other libraries have similar gallery/slideshow code, but if you are not a javascript fan – this is the one for you.

Dropdown CSS/Javascript Menus

If you ever need to implement drop down menus and want to use clean CSS/javascript code, check out: Son of Suckerfish Dropdown menus. I have implemented these on a few web sites now for my clients and have been very happy with the results. If you are using WordPress, you can also use to dynamically generate the drop down menus. Enjoy!

A Weekend Full of Learning

What a crazy and full weekend! Many thanks to Demitrious for helping me out this weekend with PHP. If you are a beginner, check out Demtrious’s article: Poor Man’s Debugger. This article helped me greatly over the past weekend and I feel like I now have a good handle on what to do when things go unexpectedly.

I spent Sunday working with javascript for another project and found some of the javascript articles on webmonkey to be a big help.

Go PSU and Bears!

[tags]PHP, debugging, Javascript[/tags]

ajax.

After months of reading about it, I thought I would share some of the best articles on AJAX that I have come across:

[tags]AJAX, XMLHttpRequest [/tags]

kick ass calendar.

Well. A good calendar solution is always needed for business and/or personal needs. I just happened to stumble on a really cool PHP/CSS/AJAX solution: Monket Calendar. Check out the demo. As of now, it is still in beta testing, but it looks promising. (Especially since it supports RSS and iCal…as well as used AJAX. I need some more AJAX in my life.
[tags]Monket Calendar, AJAX[/tags]

javascript help.

When creating my first Dashboard widget I had to brush up on my javascript skills. I used javascript a little bit in the late 1990s, and since then, I have found PHP or CSS to take care of most of my needs for web development. As most people know, javascript is making quite a comeback (thanks to AJAX) so I thought I better take another look. I wanted to share some of the resources I found useful:

[tags]Javascript[/tags]