Simple, CSS-only expanding vertical menu

I kind of stumbled into this today and it’s working nicely for me in FF, IE7, Safari and Opera.

Here’s the example page.

Step-by-step:

1. Set up a simple unordered list with multiple levels (mine has two, but you could use more with a little work).

2. Here’s the HTML for the menu section (refer to the example for the full code). Note that you need to put an ID on each of the ul li ul’s.

<div class=”nav”>
<ul>
<li><a href=”expanding_menu_problems.html”>Your Problems</a>
<ul id=”menu-problems”>
<li>Issue 1</li>
<li>Issue 2</li>
<li>Issue 3</li>
</ul>
</li>
<li><a href=”expanding_menu_solutions.html”>Our Solutions</a>
<ul id=”menu-solutions”>
<li>Solution 1</li>
<li>Solution 2</li>
<li>Solution 3</li>
</ul>
</li>
<li><a href=”expanding_menu_studies.html”>Our Case Studies</a>
<ul id=”menu-studies”>
<li>Case Study 1</li>
<li>Case Study 2</li>
<li>Case Study 3</li>
</ul>
</li>
</ul>
</div>

3. Style the list any way you like, but the important parts to remember are to (1) give all the ul li ul’s display: none; and (2) then add in, one for each ul li ul, something like this:

#problems #menu-problems {
display: list-item;
}

4. Now on the body tag, add an ID: ‘body id=”problems”‘ for the first page. On each page, do the same for each different ul li ul you’ve created.

That’s it. When you visit each page, the CSS in step 3 will toggle the display of the ul li ul associated with the body tag and only that one’s contents will display.

Please if you have any problems with this, ask. I just typed this up quickly because, of course, I’m on a deadline.

6 comments

  1. I’m looking at the example, and I don’t get it.

    It appears that each menu category links to a different page?

    So when you want to expand an item, it opens a new page?

    Is that correct?

  2. It does in this example, but as I said, I typed it up in five minutes. I needed it to expand only when on that category’s page page and that’s what this example does, but it could just as easily be keyed to expand only when the category is ‘current.’

  3. Perfect! I _ahem_ didn’t realise I could nest uls like that (must have overlooked that bit in the book!).

    I shall use this with a bit of PHP (to add classes to the uls depending on dir and/or current page) to replace my overblown PHP arrangments of menus with sub and sub-sub list items.

    The end result will be identical but the ‘behind the scenes’ will be a lot neater.

    I’ll do some tweaking but this is an excellent starting point, thanks.

  4. Hi there, this is pretty much what I’ve been looking for for half the day, but your example page throws a 404, is there any chance you could re-link it?

    Thanks!

  5. Sorry about that – I forgot to add those files when I redesigned my site last fall. Should be working now, but this is probably not what I’d recommend using. Each click opens the menu in a new page which is not at all ideal. This was just me thinking out loud.

    I’d either connect this with some PHP and a ‘current’ class on the li or try one of these instead:

    CSS Only:
    http://www.cssplay.co.uk/menus/vertical_slide.html
    http://www.cssplay.co.uk/menus/concertina-slide.html
    http://www.cssplay.co.uk/menus/vertical-concertina.html

    CSS with Javascript:
    http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
    http://www.stunicholls.com/menu/vertical-concertina.html
    http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu-With-CSS-and-JavaScript

  6. Thanks Debbie it´s actually pretty much what I was after as it is, due to a client running their site on Microsoft content management server 2002, having no access to the and all the styles having to be inline. Yep, I think they think that it´s STILL 2002.

Leave a Reply

Your email address will not be published. Required fields are marked *