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

Mar 07
21

jQuery Menu Example

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

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!

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

Leave a Comment

Akismet has protected Blogvaria from 71,721 spam comments. Design by Evaria.com. Powered by WordPress.
Our beloved and trusted server has rendered 3.279 pages so far today, an amazing 4.008 pages yesterday
and even more astonishingly 102.929 pages since 12 September 2008 alone without dropping a byte nor a pixel.

Close
E-mail It