collapsible menus updated

Through the encouragement of “Helen” (full name, location, website etc – unknown), I’ve been prodded into reviving an old chestnut of mine called the Collapsible Menu.

The idea of this script was that it takes menus that you create in the form of unordered lists, then it dynamically converts them into a collapsible menu.

For instance, if you have the following menu:

  <ul>
   <li><a href="/">home</a>
    <ul>
     <li><a href="/aboutme">about me</a></li>
     <li><a href="/contact">contact me</a></li>
    </ul>
   </li>
   <li><a href="/gallery">photo gallery</a></li>
  </ul>

You can add in the script:

  <script type="text/javascript" src="cm.js"></script>

And, with no extra work, you have a collapsible menu (example).

Yes yes, I know its not new – there are many people that do that these days. But back in the day, I believe I was one of the first to do it.

Anyway – the request I had from Helen was to change the script so it was possible to remove the [+] links and instead use the entire parent link as the opener/closer.

After much tardiness on my part (been busy and sick, in turns), I’ve done that requested work.

To use the parent link as the opener/closer, you need to override a variable. After the tag which includes the JavaScript, place this line:

 <script type="text/javascript">parentLinkIsOpener=1;</script>

An example of that in action can be seen here.

That’s about it really. But, before I submit this article, here’s a nice goody – A while back, Nathan Young took the script and made a bookmarklet out of it. Try it out! Bookmark the ul collapser, go to this page, then click on the bookmark in your bookmarks list. Violin!

5 Comments.

  1. Hi,

    I’m interested in obtaining the script cm.js. How do I go about doing that?

    Thanks,
    Jen

  2. Hi Kae!

    Seems that I needed the prodding after all – took me a while to get to your website to see this listing ;o)

    Thank you again so much – I will download the new version and give it a go – I haven’t done it yet so I’m anxious to see it work 100%…

    Thanks,

    Helen

  3. We were using the “parent link as opener” version of the script (it’s one of the better scripts out there for doing what it does) and noticed a weird display bug that only showed up in Firefox for Windows. The text from the child list items would show up inside the parent ul’s link. A brilliant colleague of mine (thanks, Andrew) figured out that it had to do with Windows line breaks (silly Windows). Below is his fix.

    In cm.js. replace this line (line 47, or thereabout):
    e=e.replace(/\n/g,'');
    with:
    e=e.replace(/(\n|\r)/g,'');

    Also, I wanted the script to only work on my navigation menus, not on every list item on the page. So I wrapped a div with an id of "navmenu" around my unordered list and replaced in cm.js (line 32):
    a=document.getElementsByTagName('UL');
    with:
    a=document.getElementById('navmenu').getElementsByTagName('UL');

  4. Just what I was looking for! I’ve put it to use in our travel guides at Travellerspoint. An example can be seen in the Melbourne Travel Guide.

    Thanks for providing this! šŸ™‚

%d bloggers like this: