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.
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
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!
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?
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.
Hi, Alex. I tried to re-create collapsible menus at my website, but to no avail. Can advise me on what went wrong please?
Hi jktan, I’d be happy to help out. Do you have a page I can look at?
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 :-)