The Net is Dead

Marco van Hylckama Vlieg on web technology, design, life and everything

Commentary

Join the discussion! Leave a comment through the comment form below!

• At 09 May '08 - 23:58 Abu wrote:

  

  Thanks for your work.
  
  I have 3 questions:
  
  1. What is the difference between your accordion and the one included with UI?
  
  2. Can your accordion support sub-accordions?
  
  3. What’s the situation for commercial projects?
  
  Thanks

  
  

• At 10 May '08 - 01:06 Marco wrote:

  

  @Abu
  
  1: I don’t really know JQuery UI but at first glance: My accordion is way simpler and smaller. There’s 29 lines of code in mine and the one in JQuery UI has 298 lines. While I’m sure the JQuery UI one has more features I think mine will be suitable for many people who don’t need all the stuff the JQuery UI one has. Also, strangely enough, my menu can do something that the JQuery UI one can’t: function as a simple slide-in-slide-out menu (non-accordion).
  
  2: No. I see no real-world purpose for that. Can you give me an example of this being put to use on a website?
  
  3: When I do something for free I think it’s appropriate for commercial users to compensate me if they earn money with it. In case you want to use any of my stuff commercially you can contact me through email and we’ll work something out.

  
  

• At 10 May '08 - 01:09 Abu wrote:

  

  @Marco
  
  Thanks for the fast reply.
  
  1. Okay.
  
  2. The real world purpose is in the application which I am designing.
  
  3. I’m contacting you now.

  
  

• At 13 May '08 - 10:45 Brandt wrote:

  

  Good stuff! I’ve been looking for an accordion menu with submenu’s (hover) and all that good stuff. Nobody seems to have this though. Is this something that can be coded using jquery?

  
  

• At 13 May '08 - 11:05 Marco wrote:

  

  @Brandt Yeah it shouldn’t be much of a problem to modify this menu to have the submenus activate on hover rather than on click.

  
  

• At 13 May '08 - 11:29 Brandt wrote:

  

  Well I have seen the menu set up where you can mouseover and cause the menu to vertically expand, but I would also like 2nd level navigation to appear on the right.
  
  For example, in your demo, if I click on Weblog Tools, the submen appears below it. Then I would like to mouseover PivotX and have another menu appear to the right of PivotX.
  
  Can this easily be done?

  
  

• At 13 May '08 - 11:44 Abu wrote:

  

  Sorry to disturb the conversation, but how do i opt-out of watching this post’s comments?
  
  Thanks

  
  

• At 13 May '08 - 11:45 Marco wrote:

  

  @Brandt yes I don’t see why it couldn’t be done.

  
  

• At 27 May '08 - 00:09 Noel wrote:

  

  Hi Marco;
  I was able to download, edit the styles and test the menu. It works great, thanks! However, I just need to ask you something: I added another section to the subsection (sub-subsection?) In essense, another .. group inside the second . It still opens up fine but it doesnt close. Is there a way for this to also behave as the higher sections?

  
  

• At 27 May '08 - 01:06 Marco wrote:

  

  @Noel,
  
  It sure is possible but this version won’t do that out of the box. It would require additional modifications to the code to make that work.

  
  

• At 27 May '08 - 02:16 Noel wrote:

  

  Hi Marco;
  I just added an id and class tags to the additional “” and it works!
  thanks for this. really appreciated.

  
  

• At 27 May '08 - 03:30 Marco wrote:

  

  @Noel interesting, would you mind sending me a quick email with the markup you’re using? I figured that MAY work even though the code wasn’t done with that in mind but I couldn’t get it right myself.

  
  

• At 28 May '08 - 07:10 Joe wrote:

  

  Very nice script – I’ve been looking for something that’s HTML based for a while now. Got a problem though…
  
  Is it possible to do some kind of “selected” function, so that both the visible nested list and parent list item have a class assigned to them, and then it dissapears when you select another one?

  
  

• At 01 June '08 - 02:02 Tom Sieron wrote:

  

  Joe: Sure you can. I’ve just used the script (thanks Marco – works like a charm!) and added the .active functionality to the currently selected menu item.
  
  To make the expanded main menu item have class .active change the lines 22 and 23 of code to :
  
  $(’#’ parent ‘ ul:visible’).slideUp(‘fast’).removeClass(“active”);
  checkElement.slideDown(‘fast’).addClass(“active”);
  
  adding the removeClass and addClass. You can make the submenu items receive .active class onclick even easier. Hope that helps.

  
  

• At 01 June '08 - 14:38 Joe wrote:

  

  Tom: thanks for that. I’ll be refining the script tomorrow, so your post is MUCH appreciated. Cheers =)

  
  

• At 02 June '08 - 04:55 Stefan Moldoveanu wrote:

  

  Hello,
  
  First of all, very nice piece of software, Marco. Good job!
  Second, is there any method to open another section (not the first one) at page load, in respect to what subsection was previously accessed?
  
  Thank you.

  
  

• At 03 June '08 - 23:41 Philips wrote:

  Marco:
  
  Thanks for the great code. I am having problems implementing the menu though and I’m sure it’s something minor. All of my menu’s load with everything fully extended already. The same thing happens if I just run your index from the zip in my browser. Any help would be greatly appreciated.

  
  

• At 04 June '08 - 14:50 Serb wrote:

  

  Ok, I’ve got a question for you now… this is a great alternative to jQuery UI menu, except for one feature that I can’t figure out just yet – how do I make a certain element expanded by default on the page (as you have the example on how to have the first element expanded)?
  
  I am trying to integrate this into the wordpress blog as a default navigation menu, and on a specific page the current page link will have “current_page_item” class name added to its list of class names as in
  
  How do I check for that class name and have that menu expanded all the way with all the sub-links by default on a page load?
  
  That is pretty much all the advice I need right now, as everything else seems pretty straight forward…
  
  Thanks!

  
  

• At 05 June '08 - 04:13 Tom Sieron wrote:

  

  Serb: If I understand correctly you’d like to control which ul element to expand on load. If this is the case then you’d want to:
  
  1) add the .current_page_item class to the you want expanded by default
  
  2) change the 4th line of the plugin code to:
  $(’#’ this.id ‘.expandfirst ul.current_page_item’).show();
  
  replacing the default “ul:first” to “ul.current_page_item”. Et voila. Your chosen submenu expands on page load.
  
  Marco: How do I unsubscribe from the comments updates ?

  
  

• At 05 June '08 - 09:57 Serb wrote:

  

  Hey Tom,
  
  Thanks for the recommendation, but I’ve got a slight problem with that.
  
  All the additional classes are added to “li” elements instead of “ul” element on the page, so .current_page_item class would be assigned to an li element inside the ul (and I can’t really control that, as that’s the way wordpress and the plugin I’m using to accomplish this display the menu/submenus)
  
  Is there a workaround for this, as in I’d check for a current_page_item class in an “li” and then expand/show the parent “ul” for that “li”?
  
  Thanks!
  
  (and is there an email I can get a hold of you aside from the comments here? promise not to bother you…)

  
  

• At 06 June '08 - 09:42 Dennis West wrote:

  

  When you say that the code cannot be used for commercial purposes do you mean it cannot be used on a commercial site or that it cannot be resold?

  
  

• At 06 June '08 - 12:51 Marco wrote:

  

  @Dennis West what it really means is if you’re building a site for a client and this menu saves you from having to program one yourself, and therefore earning you money, a small donation would be the nice thing to do.

  
  

• At 07 June '08 - 20:42 Angela wrote:

  

  This looks really good, but I’d really like to highlight the current page with an .active class. I tried Tom Sieron suggestion above, but that affected the entire li list and I’d just like to highlight the current page.
  
  How can this be done?

  
  

• At 08 June '08 - 00:41 Marco wrote:

  

  @Angela, in my opinion that should be done from the backend. This way, users with JS disabled will benefit from it as well. As you may or may not know, viewing the menu with JS disabled results in all menus being expanded at all times which is a perfectly acceptable fallback. Highlighting the current page should be part of the same acceptable degradability of the page. If done in the backend (just have it inject some class to the right menu item at page generation and create a CSS entry for it) you have a ‘best of both worlds’ solution.

  
  

• At 08 June '08 - 12:27 Chuck wrote:

  

  Hello.
  
  Love the script … however … I am stuck (like many others) with trying to indicate the active location …. Say I have 3 levels … the user drills down to the third level … the user should see where they are in the navigation … right now …. the entire menu collapses on a new page and the user will have to click through the entire menu again … not very user friendly … any ideas on how to “lock” it in position??? Same concept as “expandfirst” .... I’ve tried the mods above to no avail.
  
  Any help would be appreciated.
  
  Main Nav Item
  – Sub Nav
  – Sub Sub Nav
  – Sub Sub Nav (I am here [active/hot])
  – Sub Sub Nav
  – Sub Nav
  – Sub Nav
  – Sub Nav
  Main Nav Item
  Main Nav Item

  
  

• At 08 June '08 - 13:17 Marco wrote:

  

  Let me write some words to clarify a few things:
  
  This script, and the previous version, were merely written as a nice little programming demo. They’re not intended as ‘products’, if you catch my drift. Therefore it doesn’t do EVERYTHING and I’m not implementing everything people ask for. It was just a little code snippet I decided to blog about. As a comparison, there’s Dark Matter
  
  which is an example of what I call ‘a product’. It’s a fully functional and complete thing that I’m actively supporting. I can’t possibly do that with everything I blog about for the simple reason that I don’t have the time for it.
  
  So for all the questions in the line of “can it do ….... ?” (fill out some thing it doesn’t do) the answer is usually: yes it can, if you modify the script to make it do that. Whether I will do it? Probably not, for time reasons.
  
  I hope you guys understand!

  
  

• At 08 June '08 - 14:33 Joe wrote:

  

  @Chuck:
  
  If you want to get a certain section of the menu visible by default, change the script by doing the following:
  
  Find:
  $(‘ul.menu ul’).hide();
  
  Add below:
  $.each($(‘ul.menu’), function(){
  $(‘ul.expand’).show();
  });
  
  Then, just assign a class (“expand”) to the nested UL element, in relation to which sub-menu you wish to be visible.

  
  

• At 08 June '08 - 23:53 Dirk Jan wrote:

  

  happy birthday Marco!
  have a sunny day!

  
  

• At 09 June '08 - 06:24 Chuck wrote:

  

  I am sure glad that I didn’t send my message to the individual … but rather to the group (and glad it got approved for everyone to see)
  
  Perhaps I was not clear …. ““Love the script” ... which means it’s a great starting point … and not meant to suggest there is anything WRONG with it per se …. however … EVERYTHING can be improved upon and that is what I am hoping the “community” or the “engineer” can help with …. just looking for additional IDEAS!!!
  
  Does anyone (with time on their hands of course) have any ideas on how to lock the navigation in position at any point within the chain??
  
  Live examples rather than code snippets placed here would be the most helpful.
  
  And Marco …. don’t sweat it …. if you are busy, you are busy …. just hoping for some helpful ideas from anyone out there.
  
  TIA

  
  

• At 10 June '08 - 14:54 Chris wrote:

  

  Hey Marco!
  
  Just wanted to say thank you for writing this up for us. One thing I noticed is that in the Example 3: Non-accordion (standard expandable menu) on the demo page, the link to your blog which doesn’t contain an accordion doesn’t seem to work. You can click and click, but no link will ever open. Strangely enough though, middle-mouse clicking (in firefox) will open the link in a new tab.
  
  Is this just happening to me (tested on multiple computers, operating systems and browsers), or is this a tiny bug in the code?
  
  Cheers,
  Chris

  
  

• At 10 June '08 - 15:36 Marco wrote:

  

  You’re right Chris! I’ll take a look at that and get back to you guys.

  
  

• At 11 June '08 - 07:52 Rose wrote:

  

  Works lovely, Marco! I’m using it on my website now

  
  

• At 11 June '08 - 08:44 Serb wrote:

  

  p.s. – how do I unsubscribe from comments here? marco, can you do that for me? thanks…

  
  

• At 11 June '08 - 09:33 Marco wrote:

  

  I got a rough version that remembers state from page to page. This means that when an item is expanded it will still be expanded for later pageviews. Not tested a lot so it may not be perfect.
  
  It uses the JQuery Cookie plugin
  
  Try it here

  
  

• At 11 June '08 - 13:16 Marco wrote:

  

  @Chris, the update also fixes the bug you found. Enjoy!

  
  

• At 12 June '08 - 10:39 Chris wrote:

  

  Fantastic work, Marco! Thank you very much for the quick fix. :D

  
  

• At 12 June '08 - 21:30 Allan Mullan wrote:

  

  This doesn’t seem to work for UL’s that are more than one level deep – i.e.:
  
  <ul>
  <li>
  <a>menu1</a>
  <ul>
  <li>
  sub1
  </li>
  <li>
  <a>submenu1</a>
  <ul>
  <li>sub1</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  
  Working on a menu system but it’s about 3 or 4 levels deep, Accordions just seem to work really nicely, just gutting it doesn’t work for this.
  
  If you need an actual demo page I’m sure I can find some space somewhere.

  
  

• At 15 June '08 - 11:54 Domenico G wrote:

  Fantastic script. Well written, concise and therefore, very light.
  
  However.
  
  Every page the script is on, or more specifically, the menu itself, will not validate if the declaration is XHTML Strict.
  
  On your demo page, after the initial , there is an (obviously). But, this never closes itself. It renders itself non-standards compliant. And, when I do tpe in the closing , the menu wont work.
  
  Any suggestions?

  
  

• At 15 June '08 - 11:56 Domenico G wrote:

  Sorry, forgot the code.
  
  <code><ul id="menu1" class="menu [optional class] [optional class]">
  <li><a href="#">Sub menu heading</a>(NO CLSING LI)
  <ul>
  <li><a href="http://site.com/">Link</a></li>
  <li><a href="http://site.com/">Link</a></li>
  <li><a href="http://site.com/">Link</a></li></code>

  
  

• At 15 June '08 - 12:25 Marco wrote:

  

  @Domenico G I’m not sure what you’re talking about? My demo pages validate as XHTML 1.0 Strict…
  
  And, the menu that you think doesn’t close actually does get closed. That particular LI element contains:
  
  - a link – a whole unordered list
  
  After that there’s a closing element present in all examples.
  
  Are you sure you didn’t forget anything while implementing the menu?

  
  

• At 15 June '08 - 16:15 Domenico G wrote:

  Sorry Marco
  
  Your right.
  
  Just saw the closing LI tag in your demo page. It does indeed validate as XHTML Strict.
  
  Again, my apologies, and thanks for such a great script.
  
  Feel free to delete my earlier comment,
  
  Dom

  
  

• At 23 June '08 - 12:05 GiN wrote:

  

  Hi. thank you very much for this Menu. But could you explain in details how to integrate second version with cookie in web page?
  I’ve downloaded jquery.cookie.js, include it in html file after jquery.js . I use script with first page expand, but after I’ve included jquery.cookie.js and changed init.menu function – script stoped expand first submenu and cookie doesn’t work.
  Thank’s

  
  

• At 09 July '08 - 07:10 Oscar wrote:

  

  Hi, i try to use your menu in my blog but, i have the active class in a li nested in the ul, but i don’t make that the menu open the active class.. y change the each line.. to..
  
  j(‘li.active’).show();
  
  What it’s wrong

  
  

• At 12 July '08 - 11:36 Pjer wrote:

  

  Hi, very useful script. Remembering state of the last expanded item on page load is nice, but when I close/collapse the last opened item(clicking on it, not the other accordion link), after refreshing the page it opens/expands up again. Is there a way to remember the state of closed/collapsed item before refresh… Any help would be appreciated.

  
  

• At 15 July '08 - 06:31 Angelica wrote:

  

  First of all I think your script is great. I know nothing about javascript and I managed to get it to work fine. My only trouble is that I’d like to use the menu as a library item in dreamweaver so I can update it easily, but the expand first command won’t work in this situation. Would it be too much trouble to provide an outside variable to make a menu expand first? I would appreciate any help you could provide. Like I said, I know nothing about javascript.

  
  

• At 16 July '08 - 02:25 glove wrote:

  

  good stuff.. i have configured it to work in IE6..
  i have also managed to combine minor updates to make it select the sub-menu item i want.. and add the class ‘active’
  
  good work!

  
  

• At 16 July '08 - 03:26 glove wrote:

  

  hmm, is it possible to have a ‘ ‘ ‘-’ image to change as you expand/collapse on the accordion?

  
  

• At 16 July '08 - 03:35 glove wrote:

  

  i have managed to exand my sub-item on page load.. (2nd level)
  
  now i have a 3rd level menu item.. how do i modify the code to expand and select (label as class ‘active’) a 3rd level menu item on page load?

  
  

• At 18 July '08 - 08:04 Scott wrote:

  

  Hi Marco,
  
  Thanks for the great code – it works wonderfully! I wanted to modify it slightly so that I could add “.expand” to an li so that instead of expandfirst on the ul, I could choose which li I want expanded on load. Not well-versed enough in JQuery to figure this out and wondered if you could give me a hand. Thanks!
  
  -Scott

  
  

• At 18 July '08 - 17:41 Marco wrote:

  

  @Scott,
  
  Line 4 says: $(’#’ this.id ‘.expandfirst ul:first’).show();
  
  Change it into:
  
  $(’#’ this.id ‘ .expand ul’).show();
  
  And it will do exactly what you want.

  
  

• At 21 July '08 - 13:03 Aaron wrote:

  

  I noticed that you said this could be modified to expand on hover instead of on click. Is there anyone who could tell me how to do this?

  
  

• At 28 July '08 - 22:16 tiklat wrote:

  

  thanks for sharing js file.. it’s wonderfull..

  
  

• At 29 July '08 - 06:28 Gavin wrote:

  

  Hi,
  
  great script, I’d like to make one suggestion. To make the page more accessible the clickable menu items should be marked up as headings.
  
  This would mean if js is disabled/not supported you will get a nice semantic properly structured page.
  
  The clickable links introduce the page content below it.

  
  

• At 30 July '08 - 07:55 metafor wrote:

  

  hi there. i am currently trying to find a proper way to integrate this accordion menu into modx, which works so far.
  
  i am puzzled that expanding first item on pageload is not working with the cookie version, even on your demo it will not open the first item, i checked this in ie7 and firefox3 on vista, cookies are working though. and no error message in the js-console… strange…
  
  maybe you can help me out. otherwis thank you a lot for the easy to implement code.
  
  metafor

  
  

• At 02 August '08 - 10:42 Diego wrote:

  

  Hi Marco, here is Diego, i love your script but i have some problem setting the cookies for the active link in the sub menu, here is the page i’m building
  http://www.pirolab.it/bim/interna2.html
  and here is the code:
  var current = $.cookie(‘current’);
  if (current == ‘addClass’) {
  $( ‘.uno’ ).addClass(‘current’);
  };
  
  $( ‘ul.menu>li>ul>li’ ).click( function () {
  $( this ).addClass( ‘current’ )
  $( this ).addClass(‘uno’)
  if(this.className == (‘uno’)) {
  $.cookie(‘current’, ‘addClass’)
  }
  }
  );
  
  but i can’t memorize in the cookies the active link of the submenu,
  any idea’?
  tnx in advance
  
  Diego

  
  

• At 07 August '08 - 21:58 Noel wrote:

  Hi Marco;
  I used this menu of yours but was having problems with leaving a section open when a user clicks on a sub-subsection (2nd or 3rd level deep). The update you made using cookies was very timely. I cannot thank you enough!

  
  

• At 10 August '08 - 07:43 Petras wrote:

  

  solution for CMS Made Simple menu
  
  js code:
  
  function initMenus() {
  $(’#menu1 ul’).hide();
  $(’#menu1 li.activeparent ul’).slideDown(‘slow’);
  $(’#menu1 li a’).click(
  function() {
  
  var checkElement = $(this).next();
  var parent = this.parentNode.parentNode.id;
  
  if($(’#’ parent).hasClass(‘noaccordion’)) {
  if((String(parent).length > 0)

  
  

• At 27 August '08 - 08:29 Benjamin wrote:

  

  Hi Marco
  
  I was reading the comments and saw that there was no functionality for sub menus. One area this would be helpful in is if you have a menu with regions and then cities inside of that. I needed that sort of functionality for a site I built and used a prototype version of accordian.
  
  I’m impressed with your version of accordian and think it would be a great addition to add sub menus.

  
  

• At 10 September '08 - 01:48 Paul wrote:

  @ Gavin from July, I’m afraid I disagree entirely and will go so far as to say you are just plain wrong. This script serves to add functionality to a MENU, and as such the UL elements are perfectly suited to the task.

  
  

• At 10 September '08 - 07:29 Gavin wrote:

  

  @ Paul
  
  Nice reasoned argument there! Do you know the purpose of headings and lists, are you familiar with accessible web page practices? i think not
  
  If you know anything, headings are used to introduce content.
  
  If you look at the example on this page:
  
  http://www.i-marco.nl/weblog/jquery-acco..
  
  If the top level sections are NOT pages (this is the key) then they should be marked up as a heading (since they are used to introduce the content below it). In the current examples a screen reader user would find it more difficult to navigate the page.

  
  

• At 30 September '08 - 07:47 Banane wrote:

  

  Hi,
  
  I saw that some people made this menu accept multiple submenu.
  
  I’d like to see how it was done, I need it to do just that.
  
  Thanks!

  
  

• At 01 October '08 - 15:14 tom wrote:

  

  Thanks for a great script.
  I’m also having problems with the menus staying open even when I click another. Do you have an idea what it could be?

  
  

• At 02 October '08 - 07:53 Martijn wrote:

  

  Hey,
  
  I want to use thismenu for my own blog.
  Im quite proficient with css and xhtml, php and asp.
  But not really with jquery and javascript..
  
  So could u tell me how to make another item of the menu to expand on loading the page.
  
  So for example. When someone clicks photos and it expands to its sub categories. Like holiday, xmas, birthday etc. Is it possible when I/someone clicks on xmas, that the photos catergory will be expanded on the next page. By adding something like ‘expandfirst’ to it.
  
  Thx in advance.
  And thanks for the incredible menu.

  
  

• At 06 October '08 - 12:23 Dave wrote:

  

  Hi
  
  Thanks for the great script, I am seeing will this work for a commercial project, so if it works out I will mail you.
  
  But I am having real trouble with the cookies.js. and remembering states.
  
  I have tried it in different browsers but is failing. I know this is not you’re script, have you run into this issue before?
  
  D

  
  

• At 09 October '08 - 06:18 Noah wrote:

  Excellent script and the most semantic jquery accordion I’ve found. However, I would like to avoid using anchors with href=”#”. I’ve tried replacing (‘ul.menu li a’) with (‘ul.menu li span’) and every instance of # with .click_to_expand — so in the html I have
  span class=“click_to_expand”>Title
  
  ...
  but it only half works. Is there an easy way to replace all those with something more innocuous?
  
  Thanks!

  
  

• At 14 October '08 - 13:25 James Gaffar wrote:

  

  Was Wondering how to create a menu with a sub level that has a sublevel

  
  

• At 24 October '08 - 17:12 Chad wrote:

  

  @Marco
  
  This looks great! Thanks!
  
  I tried to follow your tip of setting an item to expand by adding this code:
  
  $(’#’ this.id ‘ .expand ul’).show();
  
  However, when I add this every item expands. Is there anything else I need to do? Thanks

  
  

• At 25 October '08 - 05:18 Marco wrote:

  

  Hi guys,
  
  Just like in the thread about my YUI accordion, here’s a heads up:
  
  I’m in the middle of moving countries at the moment (UK to USA) which is why I am not really able to address any issues with things such as this accordion script. Please bear with me until the end of November. Then I’ll hopefully have some more time again to dig through these issues.
  
  Thanks for your patience!

  
  

• At 05 November '08 - 18:27 Richard wrote:

  

  I load the demo page in the latest version of Webkit and in Firefox 3 and it simply doesn’t work – there’s no distinction between the various menus on that page and nothing expands when I click it…

  
  

• At 10 November '08 - 11:53 James wrote:

  How can I make the menu blocks larger. I’ve made them longer (width), but i’d like to to adjust the thickness of each (height) which css option adjust this?
  
  [Sorry if this is too simple of a question.]

  
  

• At 19 November '08 - 14:56 Josh wrote:

  

  The menu shows expanded upon page load for a second or so before collapsing on IE6 and IE7. Does anyone have a fix for this?

  
  

• At 23 November '08 - 10:53 Jo wrote:

  

  Maybe I’m doing something wrong… can it be that the cookie is only set when clicking on a link that has a sub menu? In other words, if you click on a link that has no submenu, the menu will still expand the submenu of the item you visited previously that had a submenu. So shouldn’t the cooke need to be set/reset regardless if a 1st level link has a submenu?

  
  

• At 26 November '08 - 09:17 Rups wrote:

  

  Great menu! Is there a way to expand the menu just after the page has loaded? So you see it sliding out when the page is loaded. Gewoon omdat het er zo lekker uitziet zeg maar…

  
  

• At 27 November '08 - 11:14 Mave wrote:

  

  Hi,
  
  First at all thanks for the script. Maybe Im doing something wrong here, but I have a page with frames, the menu workingo on one frame. Whenever I tell it to open the link in another frame it doesnt work, thanks a lot for your comment

  
  

• At 04 December '08 - 04:56 Scroll wrote:

  

  [quote]
  Maybe I’m doing something wrong… can it be that the cookie is only set when clicking on a link that has a sub menu? In other words, if you click on a link that has no submenu, the menu will still expand the submenu of the item you visited previously that had a submenu. So shouldn’t the cooke need to be set/reset regardless if a 1st level link has a submenu?
  [/quote]
  
  Exactly my problem!
  
  Any ideia to this ?
  
  Regards,

  
  

• At 07 December '08 - 13:15 John wrote:

  

  Maybe im doing something wrong but I can’t seem to get this to work. I was able to get your other accordian menu to work that had no cookies. I implement this the same way and still no luck…When i click on a link the submenu does not expand. Any thoughts?

  
  

• At 18 December '08 - 13:42 Chris wrote:

  

  Hi,
  
  I would like to expand a certain section of the accordion depending on what page im on.
  
  Im using PHP to identify what page the user is on and adds “expandfirst” if it is a page within the 1st LI.
  
  This is my code at the moment
  
  function initMenus() {
  $(‘ul.menu ul’).hide();
  
  $.each($(‘ul.menu’), function(){
  $(’#’ this.id ‘.expandfirst ul:first’).show();
  });
  $.each($(‘ul.menu’), function(){
  $(’#’ this.id ‘.expandfirst ul:first’).show();
  });
  
  $(‘ul.menu li a’).click(
  function() {
  var checkElement = $(this).next();
  var parent = this.parentNode.parentNode.id;
  
  if($(’#’ parent).hasClass(‘noaccordion’)) {
  $(this).next().slideToggle(‘normal’);
  return false;
  }
  if((checkElement.is(‘ul’))

  
  

• At 05 January '09 - 06:41 Darrell Wilson wrote:

  

  Great work – thanks!
  
  One issue for me is that I can’t get links without submenus to work. I’m using the noaccordion option and elemests with submenus work as expected, but a link on its own with no submenu dows nothing when clicked?
  
  I’m happy to edit the javascript if you know of a solution. I’m using jQuery 1.2.6
  
  Thanks

  
  

• At 06 January '09 - 19:54 Aulbry wrote:

  Hi,
  
  I love your accordion menu it is exactly what I have been searching for, beautifully done. I have never used JQuery before so my question seems ridiculous in comparison to what I have already read here…
  
  Is there a trick to make the menu fit a layout table in Dreamweaver without having the tables dimensions freak out? I have spent hours going over the code but I don’t know what I’m looking for.
  
  Thank you for any advice you could give.

  
  

• At 08 January '09 - 04:12 felix wrote:

  

  Hey Marco,
  Thanks for that great simple script!
  
  And now to you and everybody:
  
  1. the “.expandfirst” doesn’t work for me. Never expands anything (IE, FF)
  2. I’m not very well verse in jQuery but I’m sure that what I would love to get done isn’t that hard.
  Basically I have a menu like the following:
  
  item1 (no link to page)
  sub11 (link to page)
  sub12 (link)
  item2 (link)
  item3 (no link)
  sub31 (link)
  sub32 (link)
  item4 (link)
  
  Users without javascripts would see a list of all entries, no matter if they are actually links to pages or just “categories”. So I would like to have the version without JS show only the actual links. I’ve done sth. similar for some js-click-and-show/hide sections of a page via a script entry that hides the blocks on load via css -> no js would result in them being visible.
  Is there a way to include this behaviour into the menu.js?
  Maybe anyone can give me a hand with this …

  
  

• At 08 January '09 - 06:44 felix wrote:

  

  sorry for all those comments, wanted to post some code but it wouldn’t work. Is there a way to post php code?
  Cheers, felix

  
  

• At 08 January '09 - 08:32 Marco wrote:

  

  @felix best use pastebin.com and then post a URL to the code. I’ve added this tip to the comment form.

  
  

• At 08 January '09 - 13:21 felix wrote:

  

  Okay, here we go
  
  As I mentioned, for some reasonthe .expandfirst never worked on my page. And also the cookie solution to keep the current menu group open didn’t do the job at all. So I played around a bit and came to solution – at least for pages using Wordpress.
  
  You find the code here http://pastebin.com/m104525b3
  
  The code shows how to implement the “expand any desired group onLoad” in menu.js and uses Wordpress functions for page detection – but I’m sure it’s easily transferable to plain PHP/other CMS.
  
  I just used one of the tips from earlier to introduce a class .expand which is then assigned to the menu group which contains the current page. I also included an if statement to make the current page a span rather than a link.
  
  Hope this is helpful for some of you.
  
  Cheers,
  Felix

  
  

• At 08 January '09 - 13:58 Marco wrote:

  

  @felix just out of interest, does the expandfirst work for you on my demo page, for the menu that has it enabled?

  
  

• At 08 January '09 - 14:22 felix wrote:

  

  @marco
  On the demo page redux2 only number 3 with the cookie works and expands thelast group I had expanded. But number 2 doesn’t expand anything on page load.
  Just tried it with IE7 and FF3
  Cheers,
  Felix

  
  

• At 08 January '09 - 15:26 Marco wrote:

  

  @felix I haven’t looked at your code yet but suddenly I saw why it didn’t work. Line 5 should read:
  
  if(cookie === null || String(cookie).length < 1) {
  
  instead of
  
  if(cookie != null && String(cookie).length < 1) {

  
  

• At 12 January '09 - 11:38 Florian wrote:

  

  Hey,
  
  i’m looking for a jquery script like this for a while now.
  
  Anyway, some important features are missing. I would like to have a multiple nested menu. Like
  
  1. Entry
  2. Entry
  2.1. Sub-Entry
  2.2. Sub-Entry
  2.2.1. Sub-Sub-Entry
  2.2.2. Sub-Sub-Entry
  2.3. Sub-Entry
  3. Entry
  4. Entry
  
  The other feature i would like to have, is the open state depending on where i am on the site.
  
  If someone wants to modify the script like that, i would pay a little fee for it! Let me know if someone is interested.
  
  Greetings from Germany
  
  Flo

  
  

• At 12 January '09 - 11:46 Marco wrote:

  

  Hi Florian, My YUI Accordion actually supports this just fine. I don’t plan to add features to the JQuery one at this point because I rather focus on the YUI one.
  
  HOWEVER: Just a word of advice: Nested accordions are a terrible idea from an UI / Usability perspective. I strongly advice against doing this. You’ll be much better off re-thinking your site structure and the widget(s) you use for your main navigation.

  
  

• At 12 January '09 - 12:08 Florian wrote:

  

  Hey Marco,
  
  thanks for your quick answer. I know about the YUI Accordion, but i have to use jQuery for special reasons.
  
  I know about the usability issue with nested menus, but i see no other ways how to do it. It’s a huge site with 5 different content areas, each with different categories, so the nested menu would be the best to navigate through the whole site.

  
  

• At 13 January '09 - 15:47 Chris wrote:

  

  I would also like to use jquery as i have a bunch of other scripts on my site using it and im trying to keep loading times to a minimum.
  
  The accordion works perfectly except i would like to use php to add a class=“extend” to the li item if the current page is in that group so that that section extends. I have the code working perfectly using class=“extendfirst” the the ul but i want the option to expand the 2nd or 3rd li.
  
  I made it so that PHP adds class=“extend” to the li. Ive checked the code…the PHP works fine.
  
  This is what i have for the PHP file http://pastebin.com/m1cbe0efd
  Here is the JS file http://pastebin.com/m7f695e35
  
  Ive made a few tweaks based on above comments. Any help would be appreciated.
  
  Thanks
  Chris

  
  

• At 13 January '09 - 17:39 Chris wrote:

  

  Got it!
  
  Used Felix’s code and got it sorted…many thanks to Marco for this…im going to throw you some beer money once my boss lets me know how much.

  
  

• At 14 January '09 - 08:16 Daniel wrote:

  

  I love this need little menu… Just I don’t get the cookie version running.
  
  Also when I look firefox webdevelopper plugin in the cookie section… there seems no cookie stored from the menu.
  
  I using SES-URLS.

  
  

• At 14 January '09 - 20:25 Luke Stevens wrote:

  

  Great script, thanks for sharing it! The ability to set a cookie so it remembers its state is fantastic.
  
  For anyone wanting to have the menus open on hover instead of click, just change .click to .hover (obviously) AND add a null function() {} after the first fucntion (with a comma at the end of the prev function), as jquery’s .hover event expects (over, out), and without the ‘out’ it will create an error.
  
  Not sure if the code will make it, but as well as changing .click to .hover, change the last few lines FROM:
  
  }
  );
  }
  $(document).ready(function() {initMenus();});
  
  ...TO:
  
  },
  function() {}
  
  );
  }
  $(document).ready(function() {initMenus();});
  
  ... hope that helps!

  
  

• At 16 January '09 - 05:49 Joe Devito wrote:

  

  Hey, I was just wondering how to have all menu items expanded on load, where the user can decide to minimize them, and for the cookie to save the state. also How can one implement this with divs instead of uls such as : div id=“menu>

  
  

• At 16 January '09 - 11:18 Chris wrote:

  

  Joe Devito,
  
  Im using a tweaked version of the code – http://pastebin.com/ma9c9a8e
  
  The HTML is here http://pastebin.com/m46567951
  
  Basically add a class of expand to the UL to auto open.

  
  

• At 21 January '09 - 05:25 Nick wrote:

  

  Fantastic script, made even better with the redux two version.
  
  I have a quick question, along similar lines to the query and response given above on the 2nd June 2008. What I want to do is add a plus or minus graphic to the parent list item which toggles depending on whether the child list is opened or closed. I gather the solution would be similar to the response mentioned above, adding the lines:
  
  removeClass(“active”)
  addClass(“active”)
  
  In the appropriate place. I have tried several placements in amongst the cookie code from redux version two, none have had the desired effect.
  
  Any light you could shed on this issue would be greatly appreciated as I’ve exhausted all my lines of enquiry.

  
  

• At 21 January '09 - 11:05 fatherb wrote:

  

  Just thought I should point out that an element without a submenu will not go anywhere. The link on it does not work.
  
  Not even on your demo page.
  
  Does anyone have a fix for that?

  
  

• At 27 January '09 - 19:20 Todd wrote:

  

  Hi there. Fantastic script.
  
  I do have a question. When closing a menu I’m experiencing a jerky flicker in IE6 and IE7. I have a test page uploaded here: http://www.teaessare.com/test3/menutest3..
  
  I’m wondering if you or anyone else has some insight as to what’s happening. Any help would be greatly appreciated.
  
  Thanks
  Todd

  
  

• At 27 January '09 - 19:22 Todd wrote:

  

  Sorry, the link to the test above is actually http://www.teaessare.com/test3/menutest3..
  
  Thanks

  
  

• At 02 February '09 - 06:44 Mark Channon wrote:

  

  Hi Marco
  
  Nice post, quick question, how much do you charge to use this on a commercial site?
  
  Cheers
  
  Mark

  
  

• At 05 February '09 - 03:36 Darrell Wilson wrote:

  

  Marco,
  
  Can you please remove my email address from the comments notification list?
  
  Thanks,
  Darrell

  
  

• At 05 February '09 - 12:01 Daniel wrote:

  

  Hi Marco,
  
  Firstly let me convey my thanks for developing such a fantastic menu, this is exactly what I’ve been looking for.
  
  However, if yourself or anyone else has the time to spare, could you give me a couple of pointers on how to integrate this with a (self-hosted) wordpress blog?
  
  I must admit that I don’t know the first thing about jQuery and i’m a relative beginner when it comes to CSS. That said, I can see from your demo where the javascript files have been referenced within index.html and where you assign the class “menu” which is then styled in the stylesheet. My problem is getting this to work in my wordpress theme.
  
  I have been customising the Default theme (Kubrick) using CSS to alter the appearance of the various elements (displaying Pages horizontally for example). I want to use Categories as the sidebar navigation with behaviour as seen in your accordion menu (example 4 specifically)
  
  I have copied the javascript files to my themes folder and called them from header.php in between the tags using:

  
  

• At 06 February '09 - 16:02 Daniel wrote:

  

  Whoops! As I suspected I made a mess of my last comment. My apologies Marco!
  
  To summarise as best I can: I’m stuck trying to incorporate your wonderful accordion menu into my Wordpress theme. I am not sure how familiar yourself, or your readers are with Wordpress themes, but any help would be greatly appreciated.
  
  I am customising the Default theme (Kubrick). I currently have my Pages as a horizontal navigation and I want to use Categories as the sidebar navigation like your accordion (example 4 specifically)
  
  I have copied the two js files to my themes folder and called them from header.php in between the HEAD tags (I’m generating the path to the files using the bloginfo tag combined with the rest of the url):
  
  http://pastebin.com/m6e4eb5bf
  
  In Sidebar.php my sidebar elements are contained in a div with an id of #sidebar while the list of categories is generated using the wp_list_categories() tag (my understanding is that it generates an unordered list (ul) of list items (li)).
  
  http://pastebin.com/m62d427b6
  
  I have attempted to follow your method of giving the outermost ul an id and class (#menu1 and menu respectively), and styling that class in my external stylesheet, however neither the #menu1 id or the .menu class seem to be picked up (I see no change in appearance or javascript effect). Whereas, previously, I have been able to style my categories by referencing the #sidebar id itself combined with ul, like so:
  
  http://pastebin.com/m64c70cd2 (I shudder at the thought of all the schoolboy errors)
  
  I admit that I seem to be digging myself a rather confusing hole with regards to list nesting, despite understanding most of the (hard coded) list tutorials i’ve looked at. I suspect that I am referencing the list elements in my stylesheet incorrectly and I’m not afraid to admit i’m still learning CSS and wordpress customisation (and getting a little confused in the process!), therefore please forgive my ignorance. Any pointers would be helpful but I appreciate you may be busy.
  
  Thanks again and I promise to keep reading your stuff=)
  
  Daniel

  
  

• At 06 February '09 - 18:24 felix wrote:

  

  @daniel
  
  http://pastebin.com/m48c0d2ee
  
  that’s the code i use for wordpress … I guess it’s hard to understand if you don’t know too much about CSS ... but it might help.
  
  The way I started was to integrate the source code of the original accordeon into my header.php without any specific styling but rather inserting the provided css into my style.css
  From there I started to change the css bit by bit to finally get it to look the way I wanted it to look.
  Hmm, maybe I shouldn’t post directly after a long night out but well, it might help
  feel free to email me on dreamingof8a[at]gmx.net
  Cheers,
  Felix

  
  

• At 09 February '09 - 00:48 Rickva wrote:

  

  Hi,
  
  I have a question. I have a working accordion menu on my site, but i use ajax to display/hide some menu items. How can I expand some menuitems if the first one isn’t showed (with display:none). I use the following code:
  
  function initMenu() {
  $(’#menuSlide ul’).hide();
  $(’#menuSlide ul:first’).show();
  $(’#menuSlide li a’).click(
  function() {
  var checkElement = $(this).next();
  if((checkElement.is(‘ul’))

  
  

• At 10 February '09 - 17:24 اÙ�عاب wrote:

  

  thank you i using it now in my new project

  
  

• At 11 February '09 - 02:57 Craig wrote:

  

  Marco thank you for this brilliant script ive been scratching my head for months (literally) on how to get my accordion menu to work correctly in Wordpress and this does the job perfectly. Thank you very much although this is not something i will be making money from once my site is complete i will definitely be sending some beer money your way! Thanks!
  
  Now something for the community or yourself marco if your not too busy… which is probably not an accurate statement!
  
  Anyway im trying to make a link which does not have any child ul/li’s close the accordions which are already open. For example my accordion is the same as the first one on the demo page. When i click on the equivalent of “Marco’s Blog (no submenu)” i wish that not only to navigate to a page but close the open accordion if one is open. Is this something that is easy?
  
  I have tried tricking the script by placing an empty ul under the link however because of the # removal which fixes the back button issue, the accordion closes however does not load the link…
  
  Any tips muchly appreciated….

  
  

• At 14 February '09 - 06:41 Daniel wrote:

  

  @felix
  
  Thank you for all your help, your script will prove invaluable i’m sure. I’m learning more CSS every day so much of what you have posted makes sense, don’t worry.
  
  Waiting on my comment to be approved, i’ve been doing some thinking and i’m in two minds at the moment about whether my site really needs an accordion menu. However, I will still experiment with this menu, if only to learn a thing or two.
  
  Thank you for graciously providing an email, i’ll give you a shout if I get really stuck. If you don’t hear anything, assume all is well and enjoy your nights out
  
  Thanks again=)

  
  

• At 16 February '09 - 06:59 adam wrote:

  

  how can you make the top level item link to a page and not just open the accordian.
  
  for ecample a list like this
  
  
  Thin film photovoltaics
  Precision Optics
  
  Multilayer visible coatings
  Infra-red coatings
  Transmitting conducting oxides
  Metal reflectors
  
  
  Ophthalmic Optical Coatings
  
  Express systems
  Laboratory and Stock lens systems
  
  
  
  
  so Precision Optics would link to a page and also display the list inside it.
  
  can this be done?

  
  

• At 19 February '09 - 13:15 Jon wrote:

  

  Hi! Awesome script!
  
  I there a way to add a text block that is floated to the right on each list element. I’m trying to have one block floated left and a separate block floated right inline for each list item.
  
  Thanks,
  Jon

  
  

• At 20 February '09 - 05:27 Rick wrote:

  

  I’m curious about the same issue “adam” raised above. Is there a way to may the first level items be both expandable AND functional as links to target destinations. The jQuery UI accordion supports this by using clicks on a /- widget to control expansion, freeing the text to serve as a functional hyperlink if you wish.
  
  I’d love to know how to achieve a similar effect with this smaller, more compact and elegant code.
  
  Thanks,
  Rick

  
  

• At 22 February '09 - 21:12 Will wrote:

  

  Hi,
  Just want to say: amazing menu! It’s exactly what I was searching around for. I had no problems with the menu until I tired to use the cookie feature. I have the cookie.js file linked and the menus work fine I just can’t seem to get them to automatically open on page load. I’ve read through all the comments twice, tried peoples suggestions and even looked up the pastebin (which all seem to be expired). No matter what I do I can seem to get it to stick. I did try Scott’s and Tom’s suggestions but playing around with those and variations of them either nothing would happen or everything would expand.
  
  So like many people here I’m trying to get the submenu to stay open when a link is navigated to from that submenu. I’ve added unique classes to the sub menu’s ul tags, but that’s the only changes I’ve made. I’m probably making a nubby mistake here but any suggestions are welcomed!
  
  Here is the basic navigation layout I’m using:
  
  http://pastebin.com/m18cb71db
  
  Beyond that I’m using the redux 2 menu.js code (from the bottom of the demo page), the jquery cookie code exactly as it’s listed on the jquery site and jquery version 1.2.1.
  
  Thanks in advance for any help!

  
  

• At 22 February '09 - 21:49 Will wrote:

  

  Problem solved. I was correct about one thing, I was being nubby. The unique “class” does not go in the ‘ul’ tag as I had it. In fact it goes in the ‘a’ tag of the ‘li’ that contains the ‘ul’ for that subsection. Total brainfart on my part. The code on the redux 2 page shows it properly and for some reason I was putting it in the ‘ul’ tag. My previous post shows the bad code and here’s the working code:
  
  http://pastebin.com/m725b4f6a
  
  I also defined unique classes in parts of the navigation that have no subsections. I’m not sure if that makes a difference but I’m just happy it’s working now, lol.
  
  I do have one question, would people suggest upgrading to the newest jquery (1.3.2)?

  
  

• At 22 February '09 - 22:17 Will wrote:

  

  Well, me again. Sorry for posting like crazy. Having one problem. The first submenu that I open works fine. Stays open after I load a page from that submenu but here’s the problem. I can open a second submenu and the first one collapses, cool, but when I click a link in that second submenu once the page loads the first submenu is the one open, not the submenu of the of the navigation where the current page is located. No matter how many pages i navigate to only the original submenu is open on page load. Kinda odd…..I figure it has to be something with the cookie not refreshing or something. The only thing I took out of my above code examples was the fact that the subpages were inside folders, if that has any effect. Any suggestions?

  
  

• At 25 February '09 - 14:05 Ryan wrote:

  

  I’m using this script one of my websites, http://adambots.com,, and found that it has a tendency to expand fully when I go to certain pages and not remember how the menu was expanded on the last page.
  
  I’m using the non-accordion style.
  
  Thanks!
  Ryan

  
  

• At 04 March '09 - 09:35 Jesús Quintana wrote:

  

  Hi All!
  Stefan Moldoveanu:
  First of all, very nice piece of software, Marco. Good job!
  Second, is there any method to open another section (not the first one) at page load, in respect to what subsection was previously accessed?
  
  for do that, replace
  
  

  
  
  1. $.each($(‘ul.menu’), function(){
  
  
  2. $(’#’ this.id ‘.expandfirst ul:first’).show();
  
  

  
  

  
  
  1. });
  
  

  
  
  with:
  
  $.each($(‘ul.menu’), function(){
  $(‘ul.second’).show();
  });
  
  putting the class .second in the ul what you want

  
  

• At 11 March '09 - 09:54 tim wrote:

  

  I am using this with jquery 1.3.2min and in ie7 the slideup function has an annoying flicker when a nav section closes.. it briefly shows the hidden content again. Any ideas

  
  

• At 12 March '09 - 09:54 Thomas Alexander wrote:

  

  in current application on page load first ul and it contents are showing up, how can i show another ul(2nd or 3rd)

  
  

• At 12 March '09 - 22:09 Thomas Alexander wrote:

  

  i have sorted out how to make a particular menu based on each page
  
  
  
  Main Menu1
  
  
  Sub1
  Sub2
  
  
  
  Main Menu2
  
  
  Sub1
  Sub2
  
  
  
  give id for each main “li” and on page onload call the function onLoad=“initMenu(‘1’)
  
  function initMenu(menuid) {
  //alert(menuid)
  $(’#menu ul’).hide();
  // $(’#menu ul:first’).show();
  
  $(’#catmenu’ menuid ‘ ul:first’).show();
  // $(’#menu li:second’).show();
  $(’#menu li a’).click(
  function() {
  var checkElement = $(this).next();
  //alert(checkElement.name)
  //alert(checkElement.is(‘ul’))
  if((checkElement.is(‘ul’))

  
  

• At 13 March '09 - 04:40 Thomas Alexander wrote:

  

  function initMenu(menuid) {
  //alert(menuid)
  $(’#menu ul’).hide();
  // $(’#menu ul:first’).show();
  // if(menuid>0)
  /// $(’#catmenu’ menuid ‘ ul:first’).show();
  $(’#catmenu’ menuid ‘ ul:first’).show();
  //document.getElementById(‘catmenu’ menuid).className=“active”;
  /* $(’#’ parent ‘ ul:visible’).slideUp(‘fast’).removeClass(“active”);
  checkElement.slideDown(‘fast’).addClass(‘active’);*/
  // $(’#menu li:second’).show();
  $(’#menu li a’).click(
  function() {
  var checkElement = $(this).next();
  //alert(checkElement.name)
  //alert(checkElement.is(‘ul’))
  if((checkElement.is(‘ul’))

  
  

• At 16 March '09 - 07:52 Clive Chinery wrote:

  

  Are JavaScript scripts released under the MIT (or LGPL) licence?
  
  Please post the full CSS required by your Accordion. It would be useful if there was a single download of the required scripts (except for Jquery)
  
  I am trying to make a menu control to go on an ASP.NET master page.

  
  

• At 16 March '09 - 08:28 Chris wrote:

  I have the same problem as Will above, ie
  The first submenu that I open works fine. Stays open after I load a page from that submenu but here’s the problem. I can open a second submenu and the first one collapses, cool, but when I click a link in that second submenu once the page loads the first submenu is the one open, not the submenu of the of the navigation where the current page is located.
  
  Is there a workaround? Thank you.

  
  

• At 16 March '09 - 17:14 Cody wrote:

  

  I was trying to implement this into Wordpress to hide sub-level pages. Out of the box, the simple menu worked fine, but it would not remember what sub-pages were expanded. I tried the cookie package and it wouldn’t work either. So I came up with this solution, taking advantage of the “current_page_parent” class that Wordpress assigns to parents of the sub-pages:
  
  jQuery(document).ready(function() {
  jQuery(‘ul.menu li.current_page_parent ul’).css(“display”, “block”);
  });
  
  I used the standard menu package without cookies, though it serves the same purpose, I think.
  
  Hope this helps someone.

  
  

• At 20 March '09 - 06:12 Darren Taylor wrote:

  

  As Will and Chris have stated, I’ve found the same problem. The menus actually behave erractically, it’s difficult to determine a pattern of behaviour other than to say that they don’t remember the state once you decide to expand or contract either.

  
  

• At 21 March '09 - 18:58 Tony wrote:

  

  Hi,
  
  I’ve got the accordion working, but it seems to be conflicting with the ajaxify plugin ( http://maxblog.me/ajaxify-jquery-plugin/ ) Basically, the links inside the accordion are supposed to dynamically load content from a separate page into a div on the current page. When placed inside the accordion menu, the ajax part doesn’t work anymore…it loads the actual separate page. If I put the same menu into a separate UL, but without the class=“menu” (so that it’s no longer an accordion,) the ajax still works. So, it seems that menu.js is doing something to the link.
  
  Here’s an example. Let’s say I’m on index.html. In my accordion menu, I have a link like this:
  
  Jon Doe’s Bio
  
  When placed in a , the ajax fails and the bio.html page is actually loaded in full, instead of the contents of the bio.html page getting loaded into a div on the existing page. If I move the above line into a plain , it continues to work as expected.
  
  Any idea how to modify menu.js so that it doesn’t interfere with ajaxify plugin?
  
  Thanks.

  
  

• At 22 March '09 - 15:16 felix wrote:

  

  Hey Marco,
  any chance to unsubscribe from the comments? Thank’s a lot.
  
  Cheers,
  Felix

  
  

• At 22 March '09 - 16:42 Rick Ross wrote:

  

  Yes, I would also like to unsubscribe, but I have no idea how to do that here?
  
  Rick

  
  

• At 23 March '09 - 19:33 Patrick wrote:

  

  Is it possible to make the menu expand when mouseover, and collapse when mouseout?

  
  

• At 26 March '09 - 18:09 Stewart M wrote:

  

  Good stuff!
  Wondering if it is possible to delete the cookie at the conclusion of the session, yeah?
  
  Best, – S

  
  

• At 29 March '09 - 10:49 IPTAS wrote:

  

  Hi Marco, nice plugin by the way. I just want to inform you. I’ve just tested my page that use your accordion script with konqueror and the accordion menu fails. I think the problem only occurs with konqueror, coz when i test it with different browsers, it works like charm.
  
  I also tested your demo page with konqueror, and the same thing happen. All the accordion menu fail to work properly.

  
  

• At 29 March '09 - 13:52 mat wrote:

  

  @ felix and Daniel
  
  Hi I am also trying to integrate the script into wordpress. I saw you posted some code in the pastebin. Unfortunately, the links don’t show the code (anymore).
  
  My problems with Wordpress are the following:
  1) when clicking on a submenu link I want the submenu to stay expanded; currently it hides;
  
  2) as known, in wordpress the 1 level menu items are pages and des 2nd level menu (= submenu) are subpages; I’d like that when a page is clicked the page is loaded (does not work when jquery is set .click); furhtermore I wonder whether the corresponding submenu could be expanded automatically.
  
  Well, felix and Daniel, I’d appreciate if you could tell me about the solution you applied for wordpress.
  
  Any further hint and help is welcome.
  
  Thanks in advance.
  
  BR
  mat

  
  

• At 30 March '09 - 06:56 plisvb wrote:

  

  Hi guys,
  
  Great script by the way, best jquery accordion by far. I’m having one issue however. When I click on a link from with the accordion, it works great and it remembers the open state. However, when I click on a link that’s not associated with the accordion, it doesn’t remember the proper open state. It remembers the previous open state for some reason.
  
  Can anyone think of a reason or workaround for this.
  
  Greatly Appreciated

  
  

• At 04 April '09 - 15:15 blackacre wrote:

  

  Hi,
  
  This is great! I am using this and it works great but I’m not the greatest with javascript. Where/what in the script would I need to change so that after opening an item onclick, I can click the same item and have it close? Any help would be greatly appreciated.

  
  

• At 06 April '09 - 21:44 Gee wrote:

  

  hi! fantastic script
  but i need your help!! please
  look i have this:
  
  Link 1
  
  Sub Link 1
  Sub Link2
  
  
  Link 2
  
  Sub Link 2-1
  Sub Link 2-2
  
  
  
  
  so… i need when i click on the sub link 2-1
  the Link 2 is expanded not the first
  you understand me?
  
  sorry my english is very bad. thanks a lot
  Greatly Appreciated From Chile!

  
  

• At 07 April '09 - 22:55 Luke Wertz wrote:

  

  Quick workaround for the required menu ID on the smart menus…
  
  I’m generating my menu from Wordpress (which is, often times, less than accommodating when it comes to customizing list outputs).
  
  I added this line:
  
  $(this).attr(“id”, ‘id_’ $(‘div.navigation ul’).index(this));
  
  Right below the line:
  $.each($(‘ul.menu’), function(){
  
  I’m not sure if this will hurt performance on large lists, but mine are pretty small so it seems to be okay.
  
  HTH,
  Luke

  
  

• At 10 April '09 - 04:29 Darren Taylor wrote:

  

  I’ve just discovered a js error in IE8 with this script. When you expand and then click on a sublink the following error is display:
  
  Line: 19
  Char: 2424
  Exception thrown and not caught
  Code: 0
  url: jquery-1.3.2.min.js
  
  Any ideas how to fix this?

  
  

• At 10 April '09 - 08:35 Michael wrote:

  

  H there. Thanks for the Great Script!
  
  I’ve got the same problems as many people here; the submenu doesn’t stay in opened mode when browsing thru my webpage.
  
  So all of the solutions here didn’t work for me.
  
  Is it possible to send the status of which submenu is opened over the URL?
  
  Like …./site/page.php#site?
  
  thx in advance and sorry for my bad english!

  
  

• At 23 April '09 - 23:08 Eddie wrote:

  

  Hey there guys!!
  
  I have designed a simple solution to the problem of panel manipulation, eg. the expandfirst function, except on whatever panel you want, not JUST the first one! Hope this helps some folks out there!
  First up, open the menu.js script file, and find the line :
  48. $(’#’ this.id ‘.expandfirst ul:first’).show();
  
  Now, replace it with this line here:
  $(’#’ this.id ‘.expandfirst ul.expanded’).show();
  
  Now all there is to do is edit the HTML. Go into your HTML and MAKE SURE THE expandfirst option is ON, eg
  
  now find the panel you want to be open by default. In the tag, add class=“expanded”
  
  This does mean that you will have to edit the menu html for everypage, which makes it difficult if you are using php or something else, but this is just a statrt, I will keep working on it and see if I can find a way to get it working for CMS’s. Apologies if this solution has been posted! Just thought I would quickly share what I had found works for me.
  
  Cheers :)

  
  

• At 24 April '09 - 11:49 uh huh huh huh wrote:

  

  For everyone asking about the cookie state, it does in fact work. READ THE SCRIPT and analyze it. Therein lies the solution.
  
  Thanks for the great script Marco. Works excellent.

  
  

• At 30 April '09 - 06:26 Amr Maghraby wrote:

  

  I was added accordion but i want to expand specified section depending on the query string passed from the previous page .
  
  Ex: (Product.aspx?ID= 10 ——->productDetails.aspx) when opening productDetails page expand section which contain this
  
  
  
  test
  
  
  
  a
  
  
  a1
  
  
  
  which Div10 bind dynamic.
  
  Please Help.
  Regards

  
  

• At 19 May '09 - 05:44 free casino gambling bonus wrote:

  

  i have a 3rd levels menu using jquery. Now i wish to know how to select a menu voice when landing to a page. Please can you make me an example on how i can select “coordinamento” (2level voice) and “milano” (3rd level voice)?Thank you in advance

  
  

• At 20 May '09 - 17:17 jackrabbit75 wrote:

  

  I’m attempting something new, and hoping there’s someone that might be able to shed some light, or at least a link for reference to help me out.
  
  I have a site with 10 pages and on each page is a text link that precedes an abbreviated quote. A separate page contains your “expandfirst” accordion with 10 items, and each item is the complete quote. After the text link is clicked it needs to go to the accordion page and open the corresponding item containing the complete quote that relates to abbreviated quote.
  
  I’ve read and re-read my description to make sure it’s as understandable as possible. I hope anyone reading this is able to grasp what I’m trying to do. So if there’s anyone that is able to shed some light on my predicament, I’d be forever grateful.

  
  

• At 27 May '09 - 03:04 Carlos Corral wrote:

  

  Hello everybody.
  
  First of all thanks for this amazing script. Love your work Marco!
  
  I solved a problem refering to the cookie and remembering the states.
  I used the accordion in a Wordpress site to show a list of elements in the sidebar (no navigation menu).
  
  Wen browsing in a main page or the subpages of this main page (“domain.com/people” and “domain.com/people/peter”) the sidebar remembers the state placed in “people” with the jq cookie. But wenever you click on another main page (“domain.com/works”) the sidebar won’t remembering the last state.
  
  To fix this we have modified lines 55 and 69 of the redux version.
  
  55: $.cookie(parent, this.className, { path: “/”, domain:“yourdomain.com”});
  
  69: $.cookie(parent, this.className, { path: “/” , domain:“yourdomain.com”});
  
  Now all website remembers the state of your sidebar.
  
  Best!!

  
  

• At 01 June '09 - 11:36 Anthony wrote:

  

  First to Marco, great script!
  
  Second to anyone (since Marco is so busy), was hoping for some quick guidance… I have the accordion working perfectly but I would like to add once piece of functionality. Currenty the menu starts closed, and opens depending on the LI you select. However, if one LI is open, I would like to be able for the LI to close if you click on it again. Sort of a cross between example 1 and example 3.
  
  Thanks!

  
  

• At 01 June '09 - 14:29 Anthony wrote:

  

  Duh…. Nevermind.

  
  

• At 02 June '09 - 09:32 Sarah wrote:

  

  Is anyone having an issue with the secondary list items briefly being visible in before disappearing when the parent li is expanded? It’s only happening in IE7.
  
  My page has a lot of ajax but I can’t image that being the issue. Thanks.

  
  

• At 04 June '09 - 03:39 rkws wrote:

  

  This menu is great. Really simple and works nicely.
  I’m trying to implement it to take over a built-in side menu in MOSS which is a table instead of a UL. I got the functionality working, but the slide effects don’t work – the hidden rows just jump open and closed and it looks quite choppy.
  Do you know what css I can try putting on the menu to make the sliding work, or is there something else that I’m doing wrong besides for the css?

  
  

• At 14 June '09 - 03:28 Ollie wrote:

  

  Hi all. Loving the script.
  
  I have a question:
  
  Can a class of “selected” (or something) be applied to the clicked LI of the parent UL….
  
  I can get a class to be added to the whole UL, but not the individual LI that is clicked to open the accordion, then remove/change the class when the accordion is closed.
  
  Hope that makes sense.
  
  Ollie.

  
  

• At 19 June '09 - 00:26 Neal wrote:

  Hi, I found this script very useful.
  
  If I would use this script on wordpress with category listing, i need unique class for each A link – for use with cookie (remember state – redux 2).
  
  How can i modify this script with this (add unique class to every A link with submenu?) Can someone help me?
  
  Second question: how about if i can the link with nested submenu be clickable? (i need the menu with accordion effect and load the content link too)...
  
  Third question: If i click the A link with nested submenu, i need add a special class to LI with this A link (eq. .active)...
  
  Thank you…

  
  

• At 22 June '09 - 09:50 ixley wrote:

  

  hey Marco,
  Thanks for the great script. I used it on a project recently but really needed a way to have the current (parent) submenu section expanded for any given child page. It seems like there have been a number of other people looking for a way to do this so perhaps you could integrate this into your base code or add a simple configuration option.
  
  To anyone trying to expand the current (parent) submenu,
  this is the code I ended up using. It could perhaps be cleaner (?) but it does the job.
  
  http://pastebin.com/fe5ba2ac
  
  Insert this snippet after the initial ‘hide’ function and before ‘click’. This will expand any that is a parent of the selected page when you tag the current page link with .current_page_item (or whatever you choose…) And of course you can tailor it to your needs as necessary.

  
  

• At 25 June '09 - 19:54 Batsirai wrote:

  

  Hi
  
  Great script. How can we make the menu remain constant in its total height – so that its not pushing content beneath it down? Like the first accordion on the left here: http://view.jquery.com/trunk/plugins/acc..

  
  

• At 29 June '09 - 06:33 Magnus wrote:

  

  This is a great menu. However I have ran into a graphical issue, and I have no idea what causes it. At http://www.pecage.com/ I use it for the left menu. When using IE 7 I get a flickering effect. This does not occur with Firefox or Safari. It doesn’t occur in IE 7 when I go to the demo pages here, it’s only at http://www.pecage.com/..
  
  I have excluded CSS since it behaves the same when using the css included in the download file.
  
  I have excluded the number of menu items being the cause by limiting the number.
  
  I have checked everything I can think of but can’t figure out what the reason for this flickering might be.
  
  Any ideas?

  
  

• At 29 June '09 - 21:16 Brandon wrote:

  

  How can I get the Non-accordion to store in a cookie, all open parts, instead of just the last opened?
  
  Thanks,
  Brandon

  
  

• At 13 July '09 - 23:58 Dan wrote:

  

  I second all the praises on here. I was looking for a jQuery based accordion menu, and this works perfect. Thanks Marco.
  
  Although it’s working perfectly now, I would like to know if someone out there can help with this question. I’m using the non-accordion version, and I saw in the comments how to make a menu expand on .hover instead of .click, and technically it works. When I hover over the main nav, the sub drops down… perfect. But, the sub won’t close until I hover again over the main nav again. I’d like the sub to collapse if I hover off of any of the subs, if possible.
  
  Does that make sense? Anyone know how?

  
  

• At 27 July '09 - 16:20 Stefan wrote:

  

  Hey guys,
  
  I’m totally new to JS/jQuery but just in case it wasn’t mentioned somewhere above, you can prevent the first link that has sublinks from opening on page load by simply changing:
  
  $(’#menu ul:first’).show();
  
  to
  
  $(’#menu ul:first’).hide();
  
  instead of using the suggested ‘expandfirst’ in the CSS.
  
  Hope this will be helpful to someone :)
  
  Great peace of code btw!
  
  Keep up the great work! Cheers!

  
  

• At 05 August '09 - 04:31 daragh wrote:

  

  Hi
  Great script..
  
  Im tinkering around with it , looking to build something that has 5 top level links, sub links will be lets say 10-15 links, to keep the scroll size down i was planning on having 6 static sub links and i was hoping to use the script to click for more/expand (“weblog tools” in your sample) the remaining hidden links.
  Ive got this all working except that when i expand the link (“weblog tools” in your sample) it remains where it is, is there any way in pushing this down to the bottom so taht all 15 links are showing one after another
  
  eg:
  
  top level (static)
  sub01(static)
  sub02(static)
  sub03(static)
  sub04(static)
  sub05(static)
  sub06(static)
  click to expand (“weblog tools” in your sample)
  
  at the moment when i expand the accordian it looks like this
  
  top level (static)
  sub01(static)
  sub02(static)
  sub03(static)
  sub04(static)
  sub05(static)
  sub06(static)
  click to expand (“weblog tools” in your sample)
  sub07(static)
  sub08(static)
  sub09(static)
  sub10(static)
  sub11(static)
  sub12(static)
  
  would it be possible to do this:
  
  top level (static)
  sub01(static)
  sub02(static)
  sub03(static)
  sub04(static)
  sub05(static)
  sub06(static)
  sub07(static)
  sub08(static)
  sub09(static)
  sub10(static)
  sub11(static)
  sub12(static)
  click to expand/contract (“weblog tools” in your sample)
  
  sorry if this seems confusing…

  
  

• At 23 August '09 - 00:22 neo wrote:

  

  Hi,
  
  Thanks for your work.
  
  I have used you work in my project, and i used CUFON text replacement. for the text
  
  And i wondered, if you try to use that method.
  
  I have experiencing problem on i.e 6 when i used cufon.
  
  Thanks.

  
  

• At 23 August '09 - 14:49 PC User wrote:

  

  I’m using the “accordion menu” (aka “switch menu”) which I like very much and I have it on each of my webpages so that the user can go back and forth on the website. The links in the menu’s script are on each of the seperate pages, which causes a problem when I add or delete a webpage. Each time that I do that I have to edit the menu script on each webpage to keep all the links correct.
  
  I’m looking for a script to centralize the links where I can edit them in one place to update them for all pages. Please let me know if there is a way to reprogram this script or if there is another script for the same type of menu that I’m using.

  
  

• At 26 August '09 - 16:59 Pete Korm wrote:

  

  Hi there!
  
  first of all, thanks alot for this masterpiece :) I really enjoy it.
  
  Now I got simple question (well must be simple for you), is there a way to have alternating menu items color (for not expanded menu). I found pretty easily how to set a color for an expanded menu, but what I would like is having all non expanded menu alterning color.
  
  If there’s a simple solution let me know, if it’s too much trouble it’s ok, I will live with that!
  
  thanks again,
  Pete.

  
  

• At 04 September '09 - 07:53 Patricia wrote:

  

  Hi! I loved this menu. Simple and functional.
  
  But I have a doubt…I was reading about other people with the same, but no one of this solutions works for me.
  
  It’s an active class. I need to put a sign of minus when the menu is open (in the father li) and the add signal when the menu is closed.
  
  I’ve tried, but I can’t put this in the father li only.
  
  Could someone help me?
  
  Thanks (and sorry for my english, I’m a brazilian)

  
  

• At 04 September '09 - 21:12 Victor wrote:

  With fear of sounding like a dumb ass… How can I use this menu without it pushing down the rest of my content/page?
  
  thank you for your work on this.

  
  

• At 16 September '09 - 03:40 sisir wrote:

  

  i am using the menu with cookie enabled to save the state.its working fine,but the only problem is on the first click on any menu doesnt remeber the state but after the 2nd click onwords it remembers
  
  have anyone face this problem ?is anybody knows any solution to this ???

  
  

• At 22 September '09 - 05:53 Ujjwal wrote:

  

  Hi there,
  I am using this accordian menu and its really nice one.but how can we make some changes so that when we click on a sub menu it redirect to that page and the menu still remains opens highlighting the clicked sub menu(related sub menu).
  
  Menu1
  Sub menu1
  Sub menu2
  Menu2
  
  in the present case when we click submenu1 it goes to the submenu1 page but on that page the all menu collapsed and the user cant figure out where he/she is. it will be very good if we could manage that the Submenu1 stay opened.
  
  Thanks

  
  

• At 24 September '09 - 11:25 Matt wrote:

  

  Thanks for the neat script, nice and simple.
  
  I’m using the Non-accordion (standard expandable menu) to list groups of downloadable files.
  
  Is it possible to highlight the menu heading I’ve just clicked on. This will give the user a bit more visual feedback, i.e. the ability to add a class to ‘ul#expandablemenu li a’ so in my css I can create the following style ‘ul#expandablemenu li a.selected’?
  
  Thanks :)

  
  

• At 26 September '09 - 02:34 john wrote:

  

  Hey, first of all thanks for your script.
  
  But on problem occurs in connection with the ajax load() fkt.
  
  If i load your menu with ajax and then load an other page, come back to the site with the menu and press one menu item which is at the bottom of the menu it closes the whole content page.
  
  But i don’t know whats wrong with it :)
  
  thanks for your help!

  
  

• At 09 October '09 - 06:09 Sajid Ali wrote:

  

  Nice work. i m using this awesome menu. thank you for making it freely available.
  
  your menu system rocks buddy. :)
  
  Thank you again.

  
  

• At 03 November '09 - 06:22 dubbs wrote:

  

  I love the code here – so simple and effective! However, I have noticed a lot of bugs that appear in the dreaded IE 6/7 when you use this… I have the accordion on multiple html pages which also have the jQuery FancyBox code on them, I am using the accordion to link to other pages, and when you click on the links I get these errors:
  
  A Runtime Error has occured.
  Do you wish to Debug?
  
  Line: 19
  Error: Exception thrown and not caught
  
  And then
  
  Line: 29
  Error: ‘undefined’ is null or not an object
  
  Anyone got any ideas what might be happening here?
  
  Thanks
  
  dubbs

  
  

• At 03 November '09 - 11:54 Pedro wrote:

  

  Hi.
  This is a fine script.
  Unfortunately, Internet explorer 8 is out and (as with every new version of IE) we get some new issues to solve.
  In IE8 the margins between the submenus are ignored sometimes, making the menu look less sharp. I didn´t understand what is causind this as I’m no code expert. And it appears randomly. When I hover them they return to their propper positions.
  But if You activate the compatibility mode the problem disappears!!
  
  If anyone has some kind of workaround for this, It would be very apreciated. With the massification of windows 7, I’m sure IE8 will be all around, and it´s a shame if this script becomes less usable.
  
  Thank you for your sharing.

  
  

• At 04 November '09 - 11:59 Kevin wrote:

  

  Hello,
  
  Would you please provide a demo page where jQuery Cookie is applied? I have NO CLUE how to set up the cookie for the menu. Please help!

  
  

• At 07 November '09 - 19:36 Dave wrote:

  Hey,
  
  Was checking out your nice collapsing menu here:
  http://www.i-marco.nl/weblog/jquery-acco..
  
  ...and was wondering how in that specific example you would go about adding in your jquery code classes for a plus sign and minus sign so you can pull in bg images thru the css to indicate when the menu is expanded or collapsed. Hope that makes sense…
  
  Thanks in advance, good stuff!

  
  

• At 11 November '09 - 07:58 linkmichiel wrote:

  

  @Ujjwal:
  Is it possible to highlight the menu heading I’ve just clicked on. This will give the user a bit more visual feedback, i.e. the ability to add a class to ‘ul#expandablemenu li a’ so in my css I can create the following style ‘ul#expandablemenu li a.selected’?
  
  I added a few lines so to expand the right menu item after the surfer has clicked on a certain submenu. With an additional language like php, you can add an extra class to a menu item so as to expand this menu item and to highlight it.
  
  In menu.js:
  $.each($(‘ul.menu li ul’), function(){
  $(’#’ this.id ‘.expand’).show();
  });
  
  And in the list, add:
  change to for every submenu. The name of the id is adjustable, as long as it has an id.
  
  The full code:
  
  function initMenus() {
  $(‘ul.menu ul’).hide();
  $.each($(‘ul.menu’), function(){
  $(’#’ this.id ‘.expandfirst ul:first’).show();
  });
  $.each($(‘ul.menu li ul’), function(){
  $(’#’ this.id ‘.expand’).show();
  });
  $(‘ul.menu li a’).click(
  function() {
  var checkElement = $(this).next();
  var parent = this.parentNode.parentNode.id;
  
  if($(’#’ parent).hasClass(‘noaccordion’)) {
  $(this).next().slideToggle(‘normal’);
  return false;
  }
  if((checkElement.is(‘ul’))

  
  

• At 12 November '09 - 14:37 Matt wrote:

  

  This is great! How could I go about adding a switching arrow to the right of the menu items that expand? Right now I find it confusing when most of the menus fold down but then one randomly jumps to another site.
  
  Thanks!

  
  

• At 15 November '09 - 11:48 Jack wrote:

  

  Hi! Great work. Really easy to use.
  
  I just have the same issue as Brandon if anyone can help…
  
  “How can I get the Non-accordion to store in a cookie, all open parts, instead of just the last opened?”
  
  Any help would be much appreciated :)

  
  

• At 29 November '09 - 12:58 miss_poly wrote:

  thank you so much for sharing this great menu!

  
  

• At 01 December '09 - 14:38 OJ wrote:

  

  How do you keep a drop down section open while on a page listed in that drop down section?

  
  

• At 02 December '09 - 11:53 Tai wrote:

  

  I’m using your cookies accordion on our site (we’re a non profit entity) and when i click on a sub link from the accordion menu, it opens up other accordion tabs. For example I click on Children’s Center> Children’s menu, it takes me to the correct page but it opens up the Student Life

  
  

• At 03 December '09 - 13:40 Orhun wrote:

  

  Hi Marco,
  
  Thanks for the great work.
  
  I love your jquery-accordion-menu-redux2.
  However when i try to use it I have a small issue. When i have topmenu with submenus under it, the link i gave to topmenu does not work.
  
  For example:
  
  menu1
  menu2
  submenu1
  submenu2
  menu3
  menu4
  
  all menus have a link (a href=”...”), and all of them work except menu2 link.
  
  Would you have a solution for this problem?
  
  Thanks in advance.
  
  Cheers

  
  

• At 07 December '09 - 03:06 Tom Hermans wrote:

  

  Hi,
  
  to address the issue of the wordpress navigation where the ul-list of a submenu should be expanded when a child page is clicked upon, it’s easy to use the built-in classes of wordpress.
  
  On the 2nd line of the plugin, just add:
  $(‘li.current_page_parent > ul’).show();
  
  where it makes the ul inside the li with class current_page_parent (given by wordpress) expand..
  
  simple and easy.
  
  Greetz,
  Tom.

  
  

• At 08 December '09 - 03:22 Karin wrote:

  

  Hi!
  
  I can’t get the menu to work in ie. Might it be because I’ve chosen a fixed position for it?
  
  We’re using the menu for a school-project. The page isn’t really finished, so I can’t put it out here…
  
  Appreciate all answers I can get as fast as possible! Thx!

  
  

• At 23 December '09 - 04:26 K J Ramana Rao wrote:

  

  Hi,
  This menu is nice and simple. But i need a help from you. How can i change the selected menu color or class. when i clicked on the child menu parent menu class and child menu class to be hilighted. Pls help me

  
  

• At 29 December '09 - 05:12 valerio wrote:

  

  ok with explandfirst… what about something “expandsecond” ???
  im going crazy trying to figure this out.. how do i choose how to expand the second block and not the first?

  
  

• At 05 January '10 - 13:10 Jay wrote:

  

  Thanks for the script Marco. It was working fine until I found this bug with the cookie.
  
  I have the menu spanning from the root directory to 2 sub-directories. When everything was one level down, it acted fine. When I added one more lower lever to a sub-directory, everything started acting funny. The cookie isn’t updating and remembering how it was opened last.
  
  I did update to jquery.1.3.2 (don’t know if that has anything to do with it.)
  
  Will

  
  

• At 09 January '10 - 05:55 Tobias Heyl wrote:

  

  Hey there!
  
  I just got your script to work! The script itself ran fine except for error messages thrown all the time. And I thought it wouldn’t be too good as it might leave a bad impression on users if the site would fill the error log just by visiting the starting page.
  
  Anyway my problem was (and I just couldn’t find it out at first) that the latest jQuery-library (v1.3.2) causes the error messages such as (translated freely):
  
  Warning: Unknown pseudo class or pseudo element ‘first’.
  (This happens when loading the page)
  
  Warning: Unknown pseudo class or pseudo element ‘visible’.
  (This happens when clicking on one of the links)
  
  Switching back to the library file that’s included in the demo.zip it all works well.
  Have you experienced this before? Is there any workaround for this if people like me prefer to use the latest jQuery file?
  
  Thanks in advance, your script (and the idea) is great!

  
  

• At 10 January '10 - 10:59 Steve wrote:

  

  Hi,
  We really appreciate people like you imparting knowledge on upcoming developers like me.
  please how do you differentiate the sub menu since it doesn’t show the active link? Is there a way to achieve this?

  
  

• At 12 January '10 - 09:48 seni seviyorum wrote:

  

  Insert this snippet after the initial ‘hide’ function and before ‘click’. ?

  
  

• At 13 January '10 - 05:19 Hanns-Jochen Weyland wrote:

  

  is it possible to open the meuein an upward movement ?
  
  and how i do it ?
  
  thanks from cold hamburg

  
  

• At 20 January '10 - 15:35 Brian wrote:

  

  First and foremost, thanks for the easy-to-use script.
  
  I’ve got my menu implemented and functioning with an additional expanding sub-menu. Like others have mentioned above, I’ve had success getting the primary menu to save its state using cookies, but have run into problems with the cookies saving the state of the sub-menu after being clicked.
  
  Does anybody have a solution for getting cookies to save the state of a sub-menu?

  
  

• At 21 January '10 - 08:26 Richard wrote:

  

  Hi, (I have already posted this, but I was actually meant to post it here in the first place)
  
  I’m really liking this menu. Thanks Marco : )
  
  Somebody mentioned php include. This is what I am currently trying to do. I am in the process of testing this menu out by splitting it into a menu.php file and including it into some very simple pages. I have it working but not fully.
  
  The problem is by doing this it seems to break some of the functionality. Initially I noticed the top level menu items dont load the relevant pages when clicked. The child menu items do load the relevant pages but the menu returns to its collapsed state. I did do some nice customisaion to the menu using addClass / removeClass to help style the menu accordingly when sections were navigated to, but these are not currently working now because of the include. I tested it and found this particular part of the menu.js the problem:
  
  var checkElement = $(this).next();
  var parent = this.parentNode.parentNode.id;
  
  Has anyone had any success doing this and / or can offer me any tips?
  
  Thanks, Rich

  
  

• At 23 January '10 - 17:53 Frank Stewart wrote:

  

  Marco:
  
  First, your a saint for doing this stuff and putting up with all the hassles. They say no good deed goes unpunished, I guess.
  
  I have made a rocking menu with your ideas. I love the concept. Everything (but one) is working perfectly. I am using the code at the pastebin address above. The menu has a class of “menu noaccordion expandfirst” and I am using a ul class of “expanded” to open different sections based on which page has been navigated to. Then I use a li class of “youarehere” to style and indicate the page you are on.
  
  My problem: The first item in my menu list is a “Home” button – an li with an anchor tag and no underlying ul. I cannot figure out a way to make the link functional. After hours and hours everything I’ve tried has either not worked, or worked (made the link functional), but made every ul display as open and visible.
  
  I know your time is scarce and valuable, but if you have any input I’d be very grateful.
  
  Thanks again,
  
  Frank Stewart

  
  

• At 25 January '10 - 12:01 Meng S. wrote:

  

  Hello Marco and Fellow Users,
  
  Great script. Best I’ve found so far. The only issue I have is – I’ve used your script as hover / mouseover based. The only problem is all the menus never fully collapse when the mouse isn’t hovered over anything. In other words, there is always one menu open. Is there a way to have all menus collapse when the mouse is not over any menu? This question is pretty much the same as Patrick’s question…. posted on March 23rd.
  
  Any help is appreciated!
  
  Thanks so much.
  
  Best,
  
  Meng S.

  
  

• At 31 January '10 - 23:40 Mart wrote:

  

  This is nice Marco.
  One problem I have (and with all other accordians that I have found) is that when clicking one of the subitems, eg XBox360, it takes you to that page, but on that page when you then press the Back button it returns you to the original menu state ie. all menu items closed – in other words it doesn’t remember exactly where it came from. It would be great if the menu could remember where it was coming from and leave the Cool Stuff item expanded.
  Nevertheless – great!!
  
  Mart

  
  

• At 03 February '10 - 08:45 Kely K. wrote:

  

  Hi, thank you for this wonderful menu script!
  
  I want to know if I’m doing something wrong. I can’t figure out a way of it works on any version of IE with jQuery 1.4.1.
  
  It works fine if I use the 1.2.1 version of jQuery, like in the examples.
  Then I update jQuery and it stops working (on IE6, 7 and 8).
  
  What can I do? There’s something in the code that doesn’t work with the most recent version on jQuery, I just don’t know what. Any help is very appreciated.
  
  Sorry for my bad english, it’s not my natural language. And thank you all :)

  
  

• At 10 February '10 - 03:40 Kely K. wrote:

  

  anyone? =/

  
  

• At 10 February '10 - 09:40 Segovius wrote:

  

  Hi…I have the same issue as Frank Stewart and others above..basically need to find a way to make the ‘Home’ link which has no sub attached function as a normal link… right now is not doing anything at all because there is no submenu attached..
  
  Has anyone solved this or got any ideas?
  
  Cheers!

  
  

• At 11 February '10 - 19:36 Lamnk wrote:

  

  This is not working with 1.4.1

  
  

• At 14 February '10 - 10:38 Terry wrote:

  

  I have just implemented this very cool menu on a site I’m developing. The accordion function works great however, none of the links function. If I remove the code for the accordion, the links work just fine.
  
  Anyone have any ideas where to start troubleshooting this?

  
  

• At 14 February '10 - 15:06 Stewart Amgwert wrote:

  

  Oops, guess I could give you a link to the page that LightBox is stopping the menu from working…
  Have a look at nopeople dot com/homepage/Basement 2010/index.html

  
  

• At 16 February '10 - 09:13 Terry wrote:

  

  Any ideas for solving problem with links not working (my post a couple days ago)

  
  

• At 17 February '10 - 12:13 Steve wrote:

  

  Love this simple yet so effective code!
  
  See my implementation here: – ImageArcade – Photography By Steve Ayres
  
  Thanks,
  Steve

  
  

• At 19 February '10 - 02:19 baant wrote:

  

  Hi,
  How would I go about adding the class .active to the a link that activates each slide.
  
  Thanks

  
  

• At 27 February '10 - 08:59 Marco wrote:

  

  Terry can you post a link to a page in which the behavior you’re describing appears? On the actual demo page there are links as well and they work just fine…

  
  

Got something to add to this?

Feel free to leave a comment on this site. You can use Textile and Emoticons. Your email address is only used to show a gravatar. Please stay on-topic and use common decency. Spammers will be shot in front of a live studio audience.

If you plan on posting code, use pastebin please and post a URL to the code. The comment processing doesn't deal very well with code. Sorry for the inconvenience.

Human comment spammers: don't bother posting your crap here. Comments are moderated and I won't let any of your shit through.

Trackbacks

• Earlier musings
• Week In Links: a WordPress plugin for link digest posts (0)
• Technorati: What happened to you? (1)
• Some random thoughts about the iPad (1)
• Bookalicio.us version 2.0: an attempt to design the prettiest book blog on the net (3)
• Me, version 2.0. Released! (13)
• PreDevCamp SF Bay Area at Palm HQ - a videoblog (6)
• Me, version 2.0, almost done (2)
• Why I choose the Palm Pre to be my next mobile phone (6)
• What's up with the blogosphere lately? Tired of list-posts! (11)
• Create your own Twitter image badge with PHP (12)
• Five reasons why I hate Facebook (with a passion) (90)
• 5 things MySpace could do to improve Profile 2.0 (1)
• MySpace looking mighty fine with Profile 2.0 - How I built a MySpace profile that doesn't suck (3)
• 10 awesome Tumblr themes (7)
• A post to make sure my blog gets banned in China (9)

• Tumblr
• My son, enjoying a small baby snack in the park.
• My mom’s on Facebook. Is yours?
• Photo
• Seriously, Canada?
• Hakone Gardens, Saratoga CA
• Photo
• Funny joke in Mass Effect 2.
• Best. Game. Ever. The Avatar of videogames.
• The ePad. WIN!
• An iPhone. Astroglide. Not sure if I want to know what happened...
• HumorEarth.com - Photos Of Our Friends Dogs Doggies make me...
• Photo
• Ask me anything...
• Photo
• visit me on Tumblr

• Tag Universe
• ajax blog bloggers blogging blogosphere blogs browser browsers clock cms comment-spam comment_spam css design dutch firefox flickr google hungarian+notation internet islam javascript mint pagerank performance photography php php5 pivot pivot-blacklist pivot_blacklist powerbook programming prototype rails referrer+spam referrer_spam rss spam spammer spammers taggerati tags technorati template trackback typo usa variable virb web+2 web_2 web_development weblog weblogs website wordpress xhtml yahoo yui (all)