Accessible expanding and collapsing menu

Everybody makes mistakes, so occasionally things go wrong. One example is when Swedish design magazine Cap&Design recently published a tutorial on creating a collapsing and expanding menu.

While reading the article my jaw dropped as I realised that the tutorial uses invalid, non-semantic HTML, inline CSS and event handlers, bloated (but, amazingly, valid) CSS, and obtrusive JavaScript. In 2007.

I sent an email to the magazine’s editor, who agreed that the article shouldn’t have been printed and took the example code offline. Thank you very much for doing that – hopefully it will limit the number of people using the code in their projects.

Instead of just complaining about the lousy code and deriving satisfaction from making them take the code offline, I decided to recreate the menu from the tutorial in a more modern way, using leaner and more efficient HTML and CSS, and unobtrusive JavaScript. This kind of menu isn’t anything new, of course. Nevertheless I think publishing this comparison of the two approaches may be useful.

The HTML

The HTML that appeared in the article is this (shortened, and with id values translated from Swedish):

  1. <div id="menu">
  2. <div id="mainmenu"><a href="#" onclick="toggle('submenu1')">Category 1</a></div>
  3. <div id="submenu1" style="display:none">
  4. <div id="submenu"><a href="#">Submenu 1</a></div>
  5. <div id="submenu"><a href="#">Submenu 1</a></div>
  6. </div>
  7. <div id="mainmenu"><a href="#" onclick="toggle('submenu2')">Category 2</a></div>
  8. <div id="submenu2" style="display:none">
  9. <div id="submenu"><a href="#">Submenu 2</a></div>
  10. <div id="submenu"><a href="#">Submenu 2</a></div>
  11. </div>
  12. <div id="mainmenu"><a href="#" onclick="toggle('submenu3')">Category 3</a></div>
  13. <div id="submenu3" style="display:none">
  14. <div id="submenu"><a href="#">Submenu 3</a></div>
  15. <div id="submenu"><a href="#">Submenu 3</a></div>
  16. </div>
  17. </div>

This markup is problematic for several reasons:

  1. id values must be unique, and may not be shared by several elements on the same page.
  2. Using CSS to hide something (via style="display:none") and JavaScript to show it makes the hidden content inaccessible to people who browse with CSS on and JavaScript off.
  3. It uses inline CSS.
  4. It uses inline event handlers.
  5. The menu consists of several lists of links, so list elements should be used instead of div elements.

I replaced the HTML with this:

  1. <ul class="menu">
  2. <li><a href="#">Category 1</a>
  3. <ul>
  4. <li><a href="#">Submenu 1a</a></li>
  5. <li><a href="#">Submenu 1b</a></li>
  6. </ul>
  7. </li>
  8. <li><a href="#">Category 2</a>
  9. <ul>
  10. <li><a href="#">Submenu 2a</a></li>
  11. <li><a href="#">Submenu 2b</a></li>
  12. </ul>
  13. </li>
  14. <li><a href="#">Category 3</a>
  15. <ul>
  16. <li><a href="#">Submenu 3a</a></li>
  17. <li><a href="#">Submenu 3b</a></li>
  18. </ul>
  19. </li>
  20. </ul>

The menu now consists of nested lists of links, the inline CSS and event handlers are gone, and a class name is used to allow for more than one menu on a page, should there be a need for that. Should the browser lack support for JavaScript, all sub menus will now be displayed, and the user is not prevented from navigating the site. Much better in my opinion.

The CSS

Next a look at the CSS used in the article (id selectors translated from Swedish):

  1. #menu {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 10px;
  4. font-weight: normal;
  5. left: 20px;
  6. top: 20px;
  7. }
  8. #menu #mainmenu a {
  9. color: #FFFFFF;
  10. text-decoration: none;
  11. display: block;
  12. background-color: #990066;
  13. padding-top: 2px;
  14. padding-right: 5px;
  15. padding-bottom: 2px;
  16. padding-left: 5px;
  17. width: 150px;
  18. position:relative;
  19. }
  20. #menu #mainmenu a:hover {
  21. background-color: #CC6699;
  22. }
  23. #menu #submenu a {
  24. color: #FFFFFF;
  25. text-decoration: none;
  26. display: block;
  27. background-color: #CC0066;
  28. padding-top: 2px;
  29. padding-right: 5px;
  30. padding-bottom: 2px;
  31. padding-left: 5px;
  32. width: 135px;
  33. left: 15px;
  34. position:relative;
  35. }
  36. #menu #submenu a:hover {
  37. background-color: #CC6699;
  38. }

While that CSS is not invalid, it is definitely not optimal, for the following reasons:

  1. It suffers from what I call selectoritis, that is the use of overly specific selectors (#menu #mainmenu etc.).
  2. No use of shorthand, making the CSS bulkier than necessary.
  3. It uses positioning for no apparent reason.

Here is what I replaced it with:

  1. .menu,
  2. .menu ul {
  3. margin:0;
  4. padding:0;
  5. list-style:none;
  6. }
  7. .menu {width:200px;}
  8. .menu li {
  9. margin:0;
  10. padding:0;
  11. margin-bottom:1px;
  12. }
  13. .menu a {
  14. display:block;
  15. padding:2px 5px;
  16. color:#000;
  17. background:#b0c23d;
  18. text-decoration:none;
  19. }
  20. .menu a:hover {background:#d9dcb0;}
  21. .menu ul li {padding-left:15px;}
  22. .menu ul a {background:#ced174;}
  23. .hidden {display:none;}

I removed the font declarations since font-family and font-size are normally specified elsewhere in the CSS. While I was at it I also changed the colours to make looking at the menu a bit easier on my eyes, and added some padding and a bottom margin to the links.

The JavaScript

Finally a look at the JavaScript. The article uses the following (variable names translated from Swedish):

  1. function toggle(submenu) {
  2. if (document.getElementById(submenu).style.display == "none")
  3. document.getElementById(submenu).style.display = "block";
  4. else if (document.getElementById(submenu).style.display == "block")
  5. document.getElementById(submenu).style.display = "none"
  6. else alert("An error occured in the menu. Contact the web master.");
  7. }

The problems with this script are:

  1. It doesn’t check if the browser supports the method it uses.
  2. It works by directly changing the element style.
  3. If anything should go wrong it displays a completely useless message.

Ok, I’ll admit that the script does have an advantage over my replacement: it is a lot shorter than this:

  1. var toggleMenu = {
  2. init : function(sContainerClass, sHiddenClass) {
  3. if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
  4. var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass); // Find all menus
  5. var arrSubMenus, oSubMenu, oLink;
  6. for (var i = 0; i < arrMenus.length; i++) { // In each menu...
  7. arrSubMenus = arrMenus[i].getElementsByTagName('ul'); // ...find all sub menus
  8. for (var j = 0; j < arrSubMenus.length; j++) { // For each sub menu...
  9. oSubMenu = arrSubMenus[j];
  10. oLink = oSubMenu.parentNode.getElementsByTagName('a')[0]; // ...find the link that toggles it...
  11. oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;} // ... add an event handler to the link...
  12. this.toggle(oSubMenu, sHiddenClass); // ... and hide the sub menu
  13. }
  14. }
  15. },
  16. toggle : function(el, sHiddenClass) {
  17. var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
  18. el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
  19. },
  20. /* addEvent and getElementsByClassName functions omitted for brevity */
  21. };
  22. // Initialise the menu
  23. toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});

The replacement script works by adding or removing a class name instead of directly changing the style property of the sub menu elements.

The addEvent() and getElementsByClassName() functions are included in the full togglemenu.js script. If you use a JavaScript library that contains similar functions (they all do, probably) I suggest using those functions instead to avoid code bloat.

You can try it all put together on the Accessible expanding and collapsing menu demo page.

Caveats and some homework for the reader

Like I said at the beginning of this article, this has been done before. But hopefully showing the before and after versions of the HTML, CSS, and JavaScript will make it easier to see why I made the changes.

Despite those changes, I would think twice before using this or any similar technique. A website’s navigation should, in my opinion, be visible and straightforward, not hidden away like this or in flyout/dropdown menus.

I should also note that this script inherits a problem from the script published in the magazine: it disables the links to the top level category pages, preventing the user from navigating to them. That could be a serious problem depending on how the site is structured.

This script does not handle multiple levels. Extending it to allow for that is no big deal, but I’d think twice before doing so. Remember that there will be a lot of links for people with JavaScript disabled to wade through.

This is not production ready. I’ll leave it as a learning exercise for the reader to alter the script so that it inserts a separate link for expanding and collapsing each sub menu and lets the top level links behave normally. And, if you want the functionality, add support for multiple levels. I would also recommend reading Isofarro’s comment for ideas on a number of additional usability and accessibility improvements as well as suggestions on how the JavaScript can be improved. If I have time I will update the technique I describe in this article to use some of those suggestions, but I have a lot of things on my agenda right now so I can’t promise when that will be.

Update (2007-05-30): As has been mentioned in a couple of comments, this kind of menu can cause usability issues, making users confused when clicking a link does not open a new page. Be aware of that. I would suggest at least styling the links in a way that makes it obvious that they contain hidden information.

Posted on May 29, 2007 in JavaScript

Comments

  1. Wow, that’s a lot of div’s… Good work to straighten that out!

  2. Want menus?

    Just ask Stu, he knew a long time ago… http://www.cssplay.co.uk/menus/index.html

  3. Nice one Roger. I may use this in a project I’ve been considering taking on. Thanks!

  4. Obviously your code is about 4000x better than the original solution, but why even have the link tags? I don’t think there very semantic in this case. You don’t need them but they could easily be replaced by something more semantic.

    Pet peeve #1 w/ unobtrusive JS — anytime anyone wants to add an event listener they usually bind it to an link tag when its usually the least semantic option to use.

    I would leave them naked.

  5. May 29, 2007 by Eric

    Great overall article! I have only one problem with the method, which is users still must have javascript enabled to use the menu.

  6. Very nicely done! The original HTML and CSS bothered me a bit too.

  7. Sorry, I surely missed something…

    Where’s accessibility here? I mean, your solution is for sure better, standard, lighter… will degrade gracefully if the user has javascript disabled and, above all, is semantically well written: a menu is a list of items and a submenu is a sub-list and you used the “semantically correct” markup (btw, what’s about DLs ?). It’s really an awesome solution. But what’s about accessibility? I just can’t get it :(

  8. May 30, 2007 by RusliRuslakall

    Thanks for great article. But I do find it annoying that when the menu loads it starts expanded and then you see it shrink to the starting position.

  9. May 30, 2007 by djn

    It’s just my eyes or you left out part of the text? Look right after your Javascript code block: the paragraph starts with a whole statement, while after the dot there is the single word ‘It’ and a closing paragraph tag.

  10. @BillyG: Please stop advertising CSS based menus as accessible alternatives to convoluted DHTML ones. They are as evil if not worse as there is no keyboard support in any of them (unless you either nest block elements in links which is invalid HTML or add a lot of redundant skip links)

    Generally this script is OK (pending some speed issues with the for loop - reading out length on each iteration). I am working on an update to PureDom Explorer which will allow for several instances and use event delegation and the YUI to cater for all of this soonish.

  11. Great write up Roger, quite interesting to see the progression from rather ugly code to a much better solution.

  12. Or, if you want a roll over effect, you could drop that JavaScript and add this:

    ul.menu li { position: relative; }
    ul.menu ul
    {
      display: none;
      left: 200px;
      position: absolute;
      top: 0;
      width: 200px;
    }
    ul.menu ul li { padding-left: 0; }
    ul.menu li:hover ul, ul.menu li.hover ul
    { display: block; }
    
    * html ul.menu li { float: left; clear: left; width: 100%; }
    * html ul.menu li
    {
      display: expression((function (e)
      {
        if (arguments.callee.called)
          return;
        arguments.callee.called = true;
    
        e.onmouseover = function ()
        {
          this.className = this.className.replace(/(?:(?:^| )hover(?:$| )|$)/g, ' hover ');
        }
        e.onmouseout = function ()
        {
          this.className = this.className.replace(/(?:^| )hover(?:$| )/g, '');
        }
      })(this), 'block');
    }

    I think doing the on-click effect in a similar fashion would be a little more elegant (i.e., being triggered by ul.menu li.clicked ul).

  13. Brodie, how exactly is a rollover effect accessible? No mouse, no dice?

  14. May 30, 2007 by Roger Johansson (Author comment)

    web:

    why even have the link tags

    Ehh.. because without them there would be no links?

    anyone wants to add an event listener they usually bind it to an link tag

    Yes, and that is a good thing since it makes the event listener accessible to keyboard users.

    Eric:

    I have only one problem with the method, which is users still must have javascript enabled to use the menu.

    Well, if you don’t have JavaScript you can still use the menu. All sub menus will be expanded and the links will be clickable.

    karim:

    Where’s accessibility here?

    The menu works for keyboard users and doesn’t prevent people who have JavaScript disabled from navigating.

    RusliRuslakall:

    But I do find it annoying that when the menu loads it starts expanded and then you see it shrink to the starting position.

    You could use a DOMReady function to execute the script as soon as the DOM has loaded to prevent that. I didn’t bother with it since that is beyond the scope of this article.

    djn:

    It’s just my eyes or you left out part of the text?

    Oops. Yes, I started writing something there and didn’t finish it :-).

    Chris:

    Generally this script is OK (pending some speed issues with the for loop - reading out length on each iteration).

    Thanks, I’ll have a look at fixing that.

    Brodie:

    Or, if you want a roll over effect, you could drop that JavaScript and add this

    No, because that would make the menu JavaScript dependent for IE 6 users and inaccessible to keyboard users.

  15. What’s accessible and what’s requested are often two different things.

    And you’d still need some sort of pointing device either way. If you argue that you can still “click” the link without a mouse, I suppose you could consider triggering it on :focus to be analogous.

    I wouldn’t hold it against you if you complained about the use of display: none; in my example though. Or if you pointed out the neglect for attachEvent in the JavaScript for IE.

    Personally I’m not a fan of hiding things like this—at least not without some sort of obvious visual cue.

  16. Hi Roger,

    while I think you’ve done a great job on the implementation, I would have reservations about the usability of it.

    I’ve seen this kind of menu behaviour cause a lot of confusion in user testing of websites.

    To summarise, on clicking a menu link, the user’s focus shifts to the main content of the page, expecting the page to have change having clicked on a link. Often, they don’t even notice the menu having changed and are then confused as to why a new page hasn’t loaded.

    I know your implementation was just to demonstrate an alternative and accessible version of the Cap&Design article, but perhaps this needs to be brought to their attention too.

    Take care,

    Lar

  17. How do I test the keyboard navigation on the menu? Or am I misunderstanding something here?

    (OT - Looks like some spam there #16.)

  18. May 30, 2007 by Roger Johansson (Author comment)

    Brodie, Laurence: You’re right that this kind of menu can also cause usability problems. I have updated the article to clarify that. Thanks.

  19. May 30, 2007 by David Owens

    I built a similar expanding menu a short while ago.

    It can contain infinitely nested tables, although I agree with Roger that these aren’t too pretty with JavaScript disabled. I’m also working on setting a specified default menu which is open when the page loads. This doesn’t work in IE yet though.

    It still needs a bit of work - there are a few bits of JavaScript which are repeated and should be reused instead. Also it could do with using a class name instead of an id for the default menu so that multiple menus can be open on loading.

    I’ve tested it in quite a few browsers though and haven’t found any problems.

  20. My favorite line:

    If you use a JavaScript library that contains similar functions (they all do, probably) I suggest using those functions instead to avoid code bloat.

    Are you going soft on us? :)

  21. Thanks for the reply Roger,

    Ehh.. because without them there would be no links?

    You don’t need links here, there un-semantic. They do not link this document to another.

    You can just apply a click event to the [li] item and add a cursor style to the text. It will look like a link, it will act like a link but won’t be unsemantic. Without JS and CSS (WAP maybe) this linked list won’t make sense.

    Yes, and that is a good thing since it makes the event listener accessible to keyboard users.

    Good point, but you could use a [button] instead. Again talking about un-styled, un-functional content links are confusing.

    Can you apply a tabindex to anything else other than link tags?

    Thanks

  22. Web:

    You don’t need links here, there un-semantic. They do not link this document to another.

    I believe Roger used <a> tags, because he expects this menu to be used in site navigation when it’s actually implemented. In this case, the <a>s would be semantic when it’s actually implemented.

    I can see your argument for the list heading not being <a>s, but I haven’t made up my mind as to whether I agree with you or not. You see, <a>s can be used as anchors, and don’t have to link to another document.

  23. May 30, 2007 by David Owens

    I think that <a> elements are the way to go. If you have JavaScript disabled then the href attribute can point to the section index, as opposed to opening the menu when JavaScript is enabled. At least that’s how I had envisioned it working.

  24. Cool!

    Note: For IE6 there is some jumpiness with the a:hover pseudoclass in the submenu items because a solid bottom border is being applied where none existed before (best guess). I think you’d have to apply a solid bottom-border to the ul.menu li ul li a elements to fix this.

  25. Ah, you’re such an elitist! ;-)

  26. One big accessibility problem you have is when JavaScript is disabled, the visitor is presented with every link in the menu. That’s too many links. You’re better off keeping just the top level of links, and inserting the submenus via an Ajax call when your initialising the script. That has the advantage of presenting just a handful of understandable links when javascript is disabled, rather than every link on the menu and sub menus. This can be improved slightly by just including the submenu of the section you are in, and leave the other submenus to come in via JavaScript.

    See Christian’s blog for a proof-of-concept of this approach.

    Also, as an accessibility improvement, its well worth inserting extra text into each top-level link, wrapped inside another element and styled offscreen. This text is used to indicate/describe that the current link isn’t a link to another page, but a showing and hiding of content in the current page. perhaps the word “dropdown” or “submenu” as the last child of the toplevel links. That way, when the link is activated, the link text should sufficiently inform a screenreader user that the purpose of the link is to activate a submenu within the current page. Its very much the same type of barrier as opening links in new windows - you’re doing something to change the default behaviour of a link, so the visitor needs to be informed.

    On to the more scripty issues. It doesn’t make long-term sense to use a class change to indicate a state change in the menu. There’s only a handful of styling options that make sense, and you’ve locked the door to other alternatives. A better approach is to delegate the means of “showing” and “hiding” a document to a function, where the default function uses a style change. That function could then be overridden so as to allow animation effects. Remember, JavaScript is ideal to enhance the usability of an existing page, so allowing animation effects which enrich the usability is a good thing to do. The default behaviour might be fine for your individual purposes, but with a small change, you open up the code to be more flexible and extendable.

    You’re using an external addEvent function to attach your JavaScript init function to the document load event. But you use the heavy handed obtrusive oLink.onclick =, which effectively kills all existing JavaScript functions attached to that element (except for some older versions of Safari, IIRC).

    Christian’s previously mentioned the slightly inefficient for loops (good idea to only lookup array.length once). There are a couple of best practices worth considering, like listing local variables at the start of the function - since scope is function wide in JavaScript, and you can see at one glance which variables are already used locally - so increases the readability and maintainability of the code.

    Its well worth considering Christian’s Event Delegation - Bonsai - method of doing toggled menus, so attaching to the click event at the ul.menu, that will reduce the number of event handlers you need - just one click handler per menu instead of one per submenu - see discussion on event delegation versus event handling .

  27. Roger wrote:

    You could use a DOMReady function to execute the script as soon as the DOM has loaded to prevent that. I didn’t bother with it since that is beyond the scope of this article.

    Roger, perhaps there’s no room in this article to offer this, but could you… even if it’s in another article? I’d like more information on this and I figure since you referenced it that you might be the right man to provide the answers. If not, how about a link or two to a couple of good resources covering this? I stink at JavaScript so this would be of value to me (and others, too, hopefully).

    Thanks.

  28. May 30, 2007 by Roger Johansson (Author comment)

    web:

    You don’t need links here, there un-semantic. They do not link this document to another.

    Not in this demo, no. But in practical use the links would lead to other documents. Or are you referring to just the top level links?

    Good point, but you could use a [button] instead. Again talking about un-styled, un-functional content links are confusing.

    button elements are form elements. This is not a form. If anything I’d say using buttons would really be confusing.

    Can you apply a tabindex to anything else other than link tags?

    Yes. Form controls. But the tabindex attribute should be used with great care, if at all.

    DougWig:

    For IE6 there is some jumpiness with the a:hover pseudoclass in the submenu items

    Well, this is not a finished solution, more a proof of concept, so it is not perfect.

    Robert: :-P

    Isofarro: Thanks for a whole bunch of useful suggestions. They all make sense. Using Ajax to get the contents of each sub menu would certainly be a good idea if there are a lot of links. It’s beyond the scope of this article but I’ll keep it in mind if I write an update.

    Mike:

    I think others would be more capable of writing a technically correct article on the DOMReady stuff :-).

  29. mmm a client wants a few extra links added to his menu structure so I may use this, so thanks for this which will come in handy.

    btw will you offer the code to the magazine so that next issue they can supply correct examples??

  30. May 31, 2007 by Roger Johansson (Author comment)

    Jermayn: Feel free to use this, but please read all the comments first. I really think something should be done about those top level links to make it more obvious that they don’t work as normal links.

    I’d ask the magazine if they’re interested in publishing an updated version, but I think this needs further improvement first and I’m not sure I will have time for that right now.

  31. I think that if one need to make drop down menus there is a lack of information structure in general and the approach must find a much better way to display a navigation.

    never liked and never will…

    M

  32. May 31, 2007 by Richard Ross

    I think that one might find the SwapClass Menu from the folks at ProjectSeven a good companion piece regarding this particular menu setup.

    I am no expert, particularly regarding the script setup, but their script appears to be more concise. The HTML and CSS appear to be evenly matched, and they seem to have done their best to follow usability and accessibility guidelines.

    One drawback: the extension is built for Dreamweaver. However, I know from experience that one can complete the tutorial and use the menu without Dreamweaver.

  33. I think others would be more capable of writing a technically correct article on the DOMReady stuff :-).

    Fair enough Roger.

    Hear that “others,” the ball’s in your court. :)

  34. June 3, 2007 by Aldrik

    I was bored, so I made a quick expandableList mock-up myself (I needed to brush up on my javascript, haven’t used it much for years).

  35. Thanks to articles like this, I’m coming to a better understanding of the accessibility implications of drop down/fly out menu behaviour.

    In terms of semantics, Roger, what are your views on the use of dfn advocated here? If one takes Isofarro’s Ajax approach, presumably this become redundant?

    Also, what are the considered opinions on Brothercake’s UDM4?

  36. June 4, 2007 by Roger Johansson (Author comment)

    Michael:

    I think that if one need to make drop down menus there is a lack of information structure in general and the approach must find a much better way to display a navigation.

    Agreed. I hate dropdowns of all kinds, including this one.

    Jonathan:

    Hmm. Interesting use of dfn. I’m not sure what I think… it may be stretching the definition of dfn a bit and I’m not sure exactly what the benefits are.

    As far as I know, UDM4 is about as accessible as a dropdown menu system can get. I don’t have any hands-on experience with it though.

  37. Hi Roger, I’m playing around with this on a project I’m working on and I noticed a bug.

    The links that are clicked to expand the submenu work just fine in that they expand the menu as expected. Problem is, they won’t open up a target if they are actual links (which is what I want).

    Example:

    Menu Item Link (goes to a page)
      Sub Menu Item 1
      Sub Menu Item 2
      Sub Menu Item 3
    

    The Menu Item link won’t open the target, it’ll only expand the menu. I see that the link is showing (browser bar), and I can right-click on it to open the target in a tab, but it won’t work conventionally. I’m thinking that the expand function needs to have a dual purpose.

    Can you help? Any insights? Thanks!

  38. Shoot, I just read the disclaimer and realize this is a known problem. Yet, I still need a solution for this. I’d love to show all the links, but with 230+ pages, I really need something like this.

  39. Hello Roger,

    thank you for the awesome Template. I’m using this for a project to show categories and subcategories of goods, not for a navigational menu. I’m wondering - would it be possible to add two buttons, one to expand all entries and one to collapse?

    Unfortunatly I don’t understand much Javascript. Could you help me with a solution?

    Kind regards and many thanks, Christoph

  40. it’s really useful, many thanx

  41. August 20, 2007 by Rogerio Coli

    Hi! I am not a professional programer but I` ve made some changes into the javascript code wich I think can be very helpfull for everybody. I nedded the script to recognize the actual page and then change the UL style to block. In this case, the script opens the UL (change the class) in wich the actual page is in. It also change the class of the actual page to be marked as the select page. It was tested in IE7 and Firefox 2.0. See an actual example in: rcoli.familiacoli.com.br/scripts/togglemenu.htm rcoli.familiacoli.com.br/scripts/togglemenu.js And for downloads: rcoli.familiacoli.com.br/scripts/togglemenu.zip thanks

  42. August 28, 2007 by Autocrat

    Fantastic article…

    Yet it does beg the question - if you disagree with such meanus, and feel that navigation should work as either Flat or relate to the current sections only (the only two alternatives to collapsed menus), why this article?

    I could understand it if you re-did the code, making it lighter, compliant and generally better (which was very well done)… but only if it was something you agree with.

    Don’t make no sense ;)

  43. I am using this for an INTRANET that has several links. Could someone provide info on how to make the expanded links stay visible once an item is clicked?

    Thanks, Shawn

  44. I have a “keyboard-friendly” expanding menu that addresses the issue related to large number of items.

    It seems to fail in Opera though :-(

  45. Is there any way to get this menu to go to a page when a top-level link (that contains a submenu) gets clicked?

    In other words, on click, I want the appropriate page to load AND for the submenu to expand.

    I’d like to user test a menu that performs this way on my Web site.

    Thank you in advance for your time,

    B

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.