jQuery + CSS + XHTML = Jappler Menus v2

Posted by: jzelazny | 6 Comments »

Categorized: 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:
    [html]

    [/html]

  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:
    [javascript]
    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();
    });
    [/javascript]
    }

  3. The CSS to make things look pretty.Here is the custom CSS that is needed:
    [css]
    #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;}

    [/css]
    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 Responses to “jQuery + CSS + XHTML = Jappler Menus v2”

  1. Ben says:

    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! :D

  2. 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 says:

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

  4. […] implemented Jappler Menus (my personal creation) for their navigation, used AJAX and a custom WordPress query to build the […]

  5. […] the front page layout and the menu design and built the site from that. I used my custom built Jappler Menus for the JS/XHTML/CSS and built the menu images and look feel of them based on the client’s […]

  6. Hermann says:

    Hello Jennifer,
    great work, congratulations.

    It seems that something is broken in the example http://jappler.com/downloads/jappler-menus_v2/
    There is only a black background without any formating.
    Firebug reports no stylesheet is attached.
    greetings

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>