Community catalyst, Refresh Austin ringleader, UX manager, speaker, Web technologist, barbecue acolyte & information junkie
I'm @BaldMan on Twitter. Let's connect

Collapsible Menus

I have implemented pureDOMexplorer (pde) in the sidebar to clean up the navigation a bit. It sits upon a foundation of accessible, XHTML-compliant unordered lists and uses unobtrusive JavaScript to toggle the visibility of sub-categories. It was extremely easy to implement and saved me a ton of time. I really wasn’t looking forward to writing the script to perform this functionality. Onlinetools.org is a very handy JavaScript resource that I recommend you check out if you are developing a site.

  1. Hi Alex,
    I have been trawling the web looking for solutions to introduce collapsible navigation to my web site. I have so many categories and sub categories that its getting silly. I did follow your suggestion to see if I could get pureDOMexplorer working without success. Is there something tricky you did to get it working with Wordpress?
    Any help much appreciated.
    K

    katja
    October 10, 2005
  2. I didn’t do anything too tricky, though I did revert back to using some of the default code versus what I wanted to use. Specifically, I ended up applying the ID nav to the containing unordered list as I didn’t feel like messing with the JavaScript to get it to work exactly the way I like. Here is the code I am using within my WP templates, hopefully it will prove helpful:

    Sidebar include file:

    <div id="Navigation">
    <ul id="nav">
    <?php /* If this is a 404 page */ if (is_404()) { ?>
    <?php /* If this is a category archive */ } elseif (is_category()) { ?>
    <li><a href="/">Home</a></li>
    <?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
    <li><a href="/">Home</a></li>
    <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
    <li><a href="/">Home</a></li>
    <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
    <li><a href="/">Home</a></li>
    <?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
    <li><p>You have searched the <a href="<?php echo get_settings('siteurl'); ?>">
    <?php echo bloginfo('name'); ?></a> weblog archives
    for <strong>'<?php echo wp_specialchars($s); ?>'</strong>.
    If you are unable to find anything in these search results,
    you can try one of these links.</p></li>
    <li><a href="/">Home</a></li>
    <?php /* If this is a monthly archive */
    } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
    <li><a href="/">Home</a></li>
    <?php } ?>
    <?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>
    <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=1'); ?>
    </ul>
    </div>

    header file

    <script type="text/javascript" language="javascript" src="/includes/pde.js"></script>

    Hope this helps!

    October 10, 2005
  3. Hey Alex, I checked in on your site today after a two week vacation and was surprised by the change. The site looks GREAT! I’ll have to look further into the collapsible menus, but do you know off-hand if there’s an easy way to display an icon if the particular link does expand vs. a link that doesn’t?

    October 10, 2005
  4. Thanks Pamela! Yes, the script is set up to allow you to easily add the expanded icon – via a background image in CSS I believe. I plan to implement that when I get a chance. I still need to implement a good many design tweaks.

    October 10, 2005
  5. Hi, Alex. I tried to re-create collapsible menus at my website, but to no avail. Can advise me on what went wrong please?

    October 10, 2006
  6. Hi jktan, I’d be happy to help out. Do you have a page I can look at?

    October 10, 2006
  7. Hi, Alex. I tried to re-create collapsible menus at my website, but to no avail. Can advise me on what went wrong please?
    I want to gather in different voices the different categories (example
    a) archive-time with sub-category of one voce for year
    example ARCHIVI MENSILI IN THE 2005-06-07-08-09 (ETC)
    and it expands the months for the years

    b) a separate voice for every macro category (“Che ora รจ”
    “extra”
    “Genova”
    Ricette”
    “lievitati”
    “schiamazzi grafomani”
    ec…)
    Help me plis!
    from Italy with love :-)

    February 2, 2009

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

Post Information

This entry is categorized under Featured, JavaScript, XHTML and tagged .

If you would like to follow the discussion on this post, you can follow the comment feed.