Collapsible Menus

Many have asked me about the code and markup behind the collapsible navigation links in the right-side column, the most recent inquiry in a comment from my previous post. I usually just refer people to my Colophon’s Other Features section where I’ve mentioned this with some links but I thought I’d mention something here, too. [Designing with Web Standards, by Jeffrey Zeldman]

I’ve used DOM-based scripting to implement the show/hide navigation with a combination of JavaScript and CSS. The JavaScript is from Chapter 15 of Jeffrey Zeldman’s top-notch book, Designing with Web Standards. I wanted the collapsible navigation to be as widely accessible as possible, in addition to not being complex or difficult to implement or maintain. More recently I’ve also tweaked the markup a bit to help with keyboard navigation.

I’ve mentioned Designing with Web Standards more than a few times here for a variety of reasons, so it’s no surprise that I highly recommend Jeffrey Zeldman’s book. You can purchase it online via and elsewhere and read more at the book’s companion site.

02:22 pm, pst28 December, 2003 Comments, Trackbacks (4) ·';}?>

Categories: Accessibility, Books, CSS, Colophon, Development, Standards


Comments, Trackbacks: 4 so far. Add yours!

  1. not really a comment on your collapsible menus (other than i wish they’d stay shown after i come back from visiting a link, and not revert to hidden)...

    ... i just wanted to say how happy i am that you’re back posting


    07:26 pm, pst28 December, 2003Comment by rudy

    comment #1 permalink ·'; else echo '·'; ?>

  2. The sites you reference are great, they’ve been in my bookmarks for a while. You did a good job with the side menus :)

    09:32 pm, pst28 December, 2003Comment by Coffee

    comment #2 permalink ·'; else echo '·'; ?>

  3. Your menu’s are elegant and I’m glad you shared with us how you achieved them.

    Also, very glad that your back posting. Happy New Year!

    12:29 pm, pst30 December, 2003Comment by Sian

    comment #3 permalink ·'; else echo '·'; ?>

  4. Shirley Kaiser's Brainstorms and Raves Friday Feast of useful info and links is back for the new year with helpful links to tutorials, comments, examples, information, charts, and tools related to abbreviations, acronyms, and initialisms. I've always w...

    03 Jan, 2004Trackback from dwh!{dezwozhere:blog}

    trackback #4 permalink ·'; else echo '·'; ?>

This discussion has been closed. Thanks to all who participated.

*/ ?>