Programming

jQuery Menu Example

- by Thomas - 60 Comments.

After taking a closer look at the genius jQuery JavaScript Library I decided to post an example on how easy you can create a nice looking, space-saving navigation menu.

It’s nothing fancy (yet) but can easily become very good-looking indeed. Take a look at the tiny Navigation Menu Example and judge for yourself. The example is based mainly on the jQuery plugin: Accordion, and the only main difference is the up and down arrows included in the “slightly modified” CSS.

I’m thinking of implementing this plugin in my new WP theme (which is currently only available in my head) in order to display more info in less space. Another thing worth mentioning is that the code itself degrades beautifully on browsers without Java support as this only results in all menus being shown in “expanded” modus.

Note! If you’re wondering why I’ve set the anchor tag href to javascript:; it is to basically make nothing happen rather than the common do-nothing insert to use for the href property which is a pound sign (#). Even if that would work also it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying.

Update: Based on user feedback I’ve added an example showing how to add a second level within the list.

About Author

Thomas

See author's posts

Related Posts

Wrong comment count in WordPress

How to find and replace text in a MySQL Database using SQL

Easily convert Excel to MySQL

About Thomas

View all posts by Thomas →

60 Comments on “jQuery Menu Example”

  2. This is a great example of an accordion menu! I was wondering if you have an example of this menu that allows it to be persistent as the page is refreshed (similar to the question from kibi) above. Any help you might be able to provide would be great!

  3. Hi Thomas,

    This Menu just looks great ^^ thank you for that good work.
    I was wondering how can I close lists under level 2 or 3 in the menu when i click on a different level 1 menu ?
    In your exemple : https://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php I click on Title 2, then, Content xtra 2 1 a. If I click on Title 3, it closed Title 2, but when I click again on Title 2, Content xtra 2 1 a keep an open state. Do you know how can I do to close this when I click on another menu level ?

    Thanks

  5. I want to create flyout menus using jQuery, Menu data will be maintained list folders.
    Please help on this.

  6. Hi tomas and thanks for the good work.. just one question which versione of the jquery lib u have used? Thank you

  7. Hi!

    I like you jquery menu its simple and perfect. How do you for example, when the page loads for the first time. how do make say “Title 1” or Title2 already expanded? what code would you use to your existing code? Thanks

    jQuery().ready(function(){
    // applying the settings
    jQuery(‘#theMenu’).Accordion({
    active: ‘h3.selected’,
    header: ‘h3.head’,
    alwaysOpen: false,
    animated: true,
    showSpeed: 400,
    hideSpeed: 800
    });
    });

  8. Hi Thomas,

    How do I go about expanding by adding a class for example

    Title 2.

    I want to expand when a child of Title 2 is active.
    Another problem is how do i make the “Title 2” link say go to bbc.co.uk if it has no children

    Thanks

  9. Hi Thomas
    Great work, thank you for the work, I have a remark here, the plugin works fine with version of jQuery you use but not with newer versions, I use jQuery version 1.4.2 and the error message I get in my debugger sounds like this:

    Error: jQuery.filter( expr, [i] ).r is undefined

    Can you manage this to work with version 1.4.2? I will be very appreciative, you have my email address aaron.adelajda@gmail.com would you let me know?

    regards
    Aaron

Comments are closed.