Blogvaria

This page is brought to you by Blogvaria (http://blog.evaria.com).

To obtain more information, ask questions and interact please visit our website.

Back to Blogvaria landing page
Feedback
Subscribe
   
Blogvaria

 

The personal pages

jQuery Menu Example

TrackBack | Filed by Thomas under Programming | Post popularity 95%

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.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • BlinkList
  • blogmarks
  • del.icio.us
  • De.lirio.us
  • digg
  • Furl
  • NewsVine
  • Netscape
  • Reddit
  • Spurl
  • SphereIt
  • Technorati
  • YahooMyWeb
  • DZone
  • feedmelinks
  • Linkter
  • Ma.gnolia
  • Slashdot
  • StumbleUpon
  • TailRank
  • co.mments
01

Jörn said,

March 21, 2007 @ 7:17 pm

Those arrows look great.

You don’t have to use anchor elements when you don’t want any. You could just use spans or h3s or whatever, add cursor: hand to your stylesheet and apply the accordion as usual. That way you don’t have to specify a useless href attribute.

02

Thomas said,

March 22, 2007 @ 11:46 am

Hi Jörn and thanks for the thumbs-up :)

Also thanks for the tip regarding the “empty” anchors. But then again I got the opportunity to mention an alternative to the # anchor, which as you probably would agree can be quite annoying from time to time…

03

Kristjan said,

October 17, 2007 @ 3:26 pm

Is it possible to make wordpress plugin to automaticly make sidebar menu collapsible and expandible?

04

Thomas said,

October 17, 2007 @ 5:14 pm

The effect is obtained simply by adding the JavaScript and Library + CSS to the header file and by including the HTML off course.

However, the jQuery library doesn’t always work well with Prototype so if the code doesn’t work I suppose you will have to look for alternatives…

I will most likely add a similar menu after upgrading to WP 2.3. If I get it working I’ll let you know :)

05

abdomain referencement said,

October 24, 2007 @ 5:49 pm

+1 for Kristjan idea,
How can I implement it on WP 2.3 ?

Anyone could help us ?

Cotp

06

Kristjan said,

November 13, 2007 @ 9:25 pm

I’ve already done something in this way, but it doesn’t support widgets… Anyone wants further info? :) Write mail at kristjan [at] eprostor dot net :)

07

Thomas said,

November 14, 2007 @ 9:48 am

Do you also have an example online? Would be nice to see it in action…

08

Kristjan said,

November 14, 2007 @ 4:26 pm

Its a sidebar on my blog :) here -> http://kristjan.eprostor.net

09

Thomas said,

November 14, 2007 @ 6:01 pm

Saw it now (ops). Though it might be an idea to make it more obvious that something will happen if you click the expandable menus… Like e.g. an arrow or plus sign next to the text. So that visitors (including myself) wont overlook it. Just a thought.

10

Kristjan said,

November 14, 2007 @ 9:21 pm

Yes… im actually working on it… this is only kinda “beta” :D

11

Jon said,

December 4, 2007 @ 12:35 pm

I have been trying to add a third level within the second but without any success yet. Any idea how that might be accomplished?

12

Thomas said,

December 4, 2007 @ 6:13 pm

I’ve just added another example which I think will answer your question…

13

Jon said,

December 4, 2007 @ 11:25 pm

Wow! A quick response with an example just like I was looking for. Such a refreshing change from the Mootools forum where there would either be no response or “Read the rules. No more accordion questions.” Thanks very much.

14

Jon said,

December 14, 2007 @ 7:01 pm

Is it possible to have the state saved between pages? As an example, if I click on “Content 3 3″ the “Title 3″ section of the accordion will still be toggled open on the “Content 3 3″ page. I assume this would be accomplished with a cookie. Thanks.

15

Thomas said,

December 15, 2007 @ 5:02 pm

You are right about the cookies – I’ll see what I can come up with early next week…

Update: I think Jörn Zaefferer’s Treeview plugin might be just the thing you are looking for:

bassistance.de/jquery-plugins/jquery-plugin-treeview

16

Kristjan said,

December 27, 2007 @ 10:18 pm

Contact me when you’ll be implanting it into Wp sidebar :P
Your jQuerry looks amazing ;)

17

Thomas said,

January 8, 2008 @ 5:45 pm

Hi Kristjan,

a “live” demo is now available at my development site: dev.evaria.com. Please consider the site yet another early “beta” – There will be errors, but I think I will get there pretty soon.

18

Neoszion said,

June 21, 2008 @ 10:53 am

I know this topic hasnt been used in a while I hope its still active?

Is it possible to make the menu be active on the 1st h3 ie. open?

19

Thomas said,

June 23, 2008 @ 12:23 pm

You can make the first header active by default by removing to following line from the script:

alwaysOpen: false,

20

Neoszion said,

June 23, 2008 @ 9:44 pm

Thanks for the quick reply thomas, but that just stops me from reclicking or closing the active active h3? This is the code for the inline:

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

21

Thomas said,

June 24, 2008 @ 11:54 am

Try this instead:

jQuery('#news_menu').Accordion({
//active: 'h3.selected', commented out
header: 'h3.head',
alwaysOpen: false,
animated: true,
showSpeed: 500,
hideSpeed: 400
});

Let me know if that’s what you’re after.

22

Neoszion said,

June 24, 2008 @ 8:01 pm

Works like a charm mate thanks!!

http://www.badassbrits.com

23

Peter said,

July 31, 2008 @ 7:44 am

I would like to add a second level list on the rest of levels but I´ve added a second level list on the rest of levels like Title 3, Title 4, and it doesn´t work.
Thak you.

24

Thomas said,

July 31, 2008 @ 1:38 pm

Not sure if I understand what you are after… Please leave a link to an example page or similar.

25

Sheldon said,

August 18, 2008 @ 6:31 am

So I have this working nicely in Firefox but not in IE (6 or 7), I’ve already changed my doc type to match the demo, no luck.

Basically IE renders the lists but the JS hides everything as soon as it fires.

Any ideas? What am I doing wrong, I can’t find it.

26

Thomas said,

August 18, 2008 @ 8:36 am

Hi Sheldon, I assume your link points to your demo site?! If yes, I believe the problem is related to invalid mark-up…

After just a quick look I noticed you’ve embedded style sheets in the body section of your page, also you’ve used headers H7 and H8. Move the styling to the header section and try using headers between 1-6 for starters. If you’ve still got problems please let me know.

Besides that your page looks great! Good luck with your further development!

Thomas

27

Sheldon said,

August 18, 2008 @ 4:35 pm

Hi Thomas, thanks for the suggestion, changing h7+8 to h5+6 did the trick, I suppose I’ll change to normal classes to get around that in the future. Thanks again for the quick response much appreciated!

28

Ahmad said,

October 17, 2008 @ 10:50 am

I am very new to jQuery..i made a little approach using jQuery to do something like Digg

http://customthemedesign.com/digg-menu/

thanks :)

29

Athena said,

October 23, 2008 @ 12:48 pm

Hello! I cant get this great menu to work. I assume that my accordion.js file is wrong. Even though i have copied your source code to test it, it doesn’t work at all. How can i get the accordion.js file?

thanks in advance.

30

Thomas said,

October 24, 2008 @ 9:58 am

Hi Athena, are you using more than just one Java library? If yes, it might be a conflict somewhere… If you use only my source code I can’t see any reason for it not to work as the example is working fine?!

31

hecbuma said,

October 30, 2008 @ 2:11 am

Hi, Im trying to use the jquery accordion and its works perfectly on Firefox, but in IE i had a problem, in IE I get and you too, a space between, each list element and apears a blank space, and for me its a big problem look http://telematicanet.ucol.mx/ctti17/index2.php I saw that you get the same mistake, did you fix this a the time????

O sorry for my english
thanks I hope you reply soon

32

hecbuma said,

October 30, 2008 @ 5:55 pm

I fix this, first every acordion had list css for the positions like this:
#theMenu2 {
width: 200px;
height: 152px;
margin: 0px;
position: absolute;
top: 357px;
left: 164px;
}
#ul2 li {
padding: 0;
width: 70px;
margin-bottom: 0;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #FF0000;
}

ok. soo I do this for every acordion.. too place everyone in a diferent position, and for fix the space in IE I do this:

#ul3 li {
padding: -1px;
width: 120px;
margin-bottom: -3px;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #FF0000;
margin-top: -1px;
}

Thats works for me fine, soo try it if you want or make some changes

33

mobil said,

November 29, 2008 @ 6:37 pm

THAKS VERY GOOD

34

Kris said,

January 7, 2009 @ 3:12 pm

I am trying to have 2 menus on the same page but work independently of each other. I have given them different id’s but they when one menu comes down the other menu slides up.

Can anyone help on this?

Thanks

35

anonymous said,

January 27, 2009 @ 6:49 pm

The menu is good. Does anybody know any other kind of menus using jquery? I am looking for a two layered menu. If the top level element is clicked then the second nav bar appears. Any help, suggestions will be appreciated as I am fairly new to query.

36

kisisel gelisim said,

March 2, 2009 @ 6:53 am

thank you.. : )

37

Dennis said,

March 3, 2009 @ 4:33 pm

Hi,

I used the multi level example and used that by adding another submenu (xtraMenu). But only the first will work in the example others are collapsed and will not “accordion”.

What am I doing wrong ? I noticed a “Peter” asked the same type of question some time ago (juli) but I could not find an answer or direction for a solution…

38

Dennis said,

March 3, 2009 @ 4:36 pm

To make my previouis issue more clear..

try to add more second level menu’s just by copying the current example. Only the first (and current) will work the others will not work and will not collapse. I cannot find the issue or fix

39

Tom said,

March 4, 2009 @ 2:16 am

Hello
when loading/reloading page all menu tree is visible for 0,1s or longer.
Is it possible to get rid off this annoying view of tree ?

40

Jason said,

March 12, 2009 @ 11:54 pm

Hi, I’m having the same issue as “DENNIS” – where all of my second and third tier data in all panels except the first instance are alwaysOpen instead of being CLOSED and waiting.

I tried changing the default settings on accordion.js for alwaysOpen from true to false but it had no effect.

If you have any ideas on how to solve this I’d be very grateful. Thanks!

41

Jason said,

March 13, 2009 @ 12:09 am

Sometimes you just can’t see the OBVIOUS solution/problem until you step back from it for a moment.

The reason that only the first instance of the tiers accordion and the rest are open is because we’ve been copying the code exactly and reusing it for each tier – and you CAN’T use the same ID on the page – no matter WHAT the purpose is… DOH!

So, when I replace the duplicated ID’s with unique ID’s and created corresponding function calls for each – it all works just fine.

42

Arti said,

April 12, 2009 @ 2:20 pm

Thanks you this is wonderful and professional.

43

Craig said,

April 29, 2009 @ 1:14 am

Hi Kristjan ,

I was just wondering if it’s possible to get the top level href working Title 1

Ps..Great work

Cheers

Craig

44

Craig said,

April 29, 2009 @ 1:16 am

sorry i mean “Hi Thomas”…. its been a long day :0.

45

Deepa said,

May 7, 2009 @ 4:48 pm

As Craig has asked is there any way to get the top level href working

46

Thomas said,

May 10, 2009 @ 9:33 am

As it is used to trigger the event it can’t act as a link at the same time. However you may add a normal link on the same line and have the “event-link” to either side of that link. It’s a bit of a struggle with the CSS but it is doable.

Let me know if you succeed and please add a link to show off your work :)

47

Aydın Boydak said,

August 9, 2009 @ 11:15 am

great explanation

thanks for article

Turkcell kontor

48

Andy Lowry said,

October 3, 2009 @ 12:05 am

Great work! I’m using this implementation in a multi-level menu. One issue I ran into was when I wanted to activate a particular submenu that was nested within others. I coded a series of “activate()” calls, but they didn’t always all use the correct index, even though the correct index was being passed in. I eventually concluded this was due to asynchronous handling of the “activate” events. I was able to fix this by using jQuery’s triggerHandler() method instead of trigger() as you’ve used in your active() method. I guess it makes the handling synchronous, and no more problems with my multi-level activations. You might want to make this change in your distribution.

-andy

49

Andy Lowry said,

October 3, 2009 @ 12:06 am

Oops… should be “activate()” method, not “active()” method in my prior post.

-andy

50

Armel said,

October 14, 2009 @ 6:34 pm

Salut je suis étudiant en info licence genie logiciel et je souhaite avoir le code source de l’exemple présenter plus haut sur le menu deroulant. Mon probleme est chez moi tous les différents liens sont visibles je veux que lorsqu’on clique sur menu ses sous sont présentés et les sous menus des autres menus cachés tant qu’on n’a pas cliqué dessus
merci

51

kibi said,

November 4, 2009 @ 12:52 pm

I’d like show opened nested list after page refresh.

How to add cookies for nested list Accordion example http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index.php ?

I can store current opened levels by cookies


$("#xtraMenu ul li a").click(function(){
$.cookie("openItem", $(this).attr("href"));
});

$("#theMenu li h3 a").click(function(){
$.cookie("openItemMain", $(this).attr("href"));
});

But when I try to open necessary part – Accordion list not opening


$("#theMenu li h3 a[href$='" + $.cookie("openItemMain") + "']").addClass("open");
$("#xtraMenu ul li a[href$='" + $.cookie("openItem") + "']").addClass("open");

Could you tell me what’s I doing wrong ?

Thank you for great jQuery Accordion script once more! :-)

52

giydirme ve makyaj oyunları said,

December 12, 2009 @ 6:17 pm

I am very new to jQuery..i made a little approach using jQuery to do something like Digg

53

digitalcanopy said,

January 4, 2010 @ 8:20 pm

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!

54

Ordell said,

January 5, 2010 @ 11:13 am

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 : http://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

55

Raghu said,

January 12, 2010 @ 10:51 am

Hi,

I am new to jquery. I want to create a navigation menu like your example (http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index.php). Can you plase guid me.

raghu

56

Anand said,

March 8, 2010 @ 9:57 am

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

57

Andrea said,

March 8, 2010 @ 4:38 pm

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

58

webbie said,

March 24, 2010 @ 4:08 pm

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
});
});

59

webbie said,

March 24, 2010 @ 10:53 pm

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

60

Aaron Adelajda said,

May 14, 2010 @ 6:47 pm

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

URL for comments RSS 2.0 feed Subscribe to Comments | TrackBack URI

Leave a Comment

Akismet has protected Blogvaria from 115,802 spam comments. Design by Evaria.com. Powered by WordPress.
Our beloved and trusted server has rendered 332 pages so far today, an amazing 3.326 pages yesterday
and even more astonishingly 285.471 pages since 09 Jun 2010 alone without dropping a byte nor a pixel.

Close
E-mail It