A new site of mine Storm Trumpets is receiving some attention for the expanding / collapsing site menu. Visit the site and click on the menu items “Trumpets” and “Trombones” to see the menu in action. It creates the illusion of movement as if driven by DHTML or JavaScript, however to the contrary it works in CSS and is really quite simple. I have been asked to explain how it works, so thought I would provide a brief tutorial for it here.

First off I must credit Stu Nicholls | CSS Play for his fantastic Definition List menu, from which my expanding / collapsing menu was essentially taken (read: used in the spirit in which Stu offers his demonstrations).

At the heart of the menu is a simple HTML definition list with each list item being a hyperlink:

<dl>
    <dt><a href="#" title="Term One">Term One</a></dt>
    <dt><a href="#" title="Term Two">Term Two</a></dt>
    <dt><a href="#" title="Term Three">Term Three</a></dt>
</dl>

Unlike ordered and unordered lists, a definition list is not a simple list of items. It is a list of terms and explanation of the terms, just like an old fashioned paper dictionary.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

In Stu Nicholls’ example the definition-list term is “Art Gallery” which uses the <dt> tag. Following the term in Stu’s example are a series of definition-list definitions, in this case the names of various artists which use the <dd> tag. If we add a series of definitions to the HTML definition list the code looks like:

<dl>
    <dt><a href="#" title="Term One">Term One</a></dt>
    <dd><a href="#" title="Definition A">Definition A</a></dd>
    <dd><a href="#" title="Definition B">Definition B</a></dd>
    <dt><a href="#" title="Term Two">Term Two</a></dt>
    <dd><a href="#" title="Definition 1">Definition 1</a></dd>
    <dd><a href="#" title="Definition 2">Definition 2</a></dd>
    <dt><a href="#" title="Term Three">Term Three</a></dt>
    <dd><a href="#" title="Definition i">Definition i</a></dd>
    <dd><a href="#" title="Definition ii">Definition ii</a></dd>
</dl>

A browser will display the HTML code like:

Term One

Definition A

Definition B

Term Two

Definition 1

Definition 2

Term Three

Definition i

Definition ii

Now the fun begins – formatting the menu with CSS!

Surround the list with a division and give it a CSS id selector. I can’t think of a better one than “menu”, so the tags surrounding my list then look like <div id="menu"> and </div>. Next we play with the actual CSS attributes in a style sheet, declaring how each <dl>, <dt>, and <dd> item will appear. My CSS looks like:

<style type="text/css">
/* These are the list attributes */
#menu dl {width: 170px; margin: 0; padding: 5px 0px 1px 0px; background-color: rgb(235, 235, 235); float:left; position: relative; font-size:77%; line-height: 190%;}
#menu dt {margin: 0; padding: 0; font-size: 1em; font-weight: bold; color: #fff; border-bottom:1px solid #fff; background: #69c;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 0.9em; border-bottom:1px solid #fff; background: #47a;}
/* These are additional attributes for the links */
#menu dd a, dd a:visited {color:#fff; text-decoration:none; display:block; font-weight:normal; padding: 5px 5px 5px 40px; background: #424f5c; width:129px;}
#menu dd a:hover {background: #d5dbe1; color:#c00;}
#menu dt a, dt a:visited {color:#fff; text-decoration:none; display:block; font-weight:bold; padding:5px 5px 5px 20px; background: #6c8094; width:149px;}
#menu dt a:hover {background: #d5dbe1; color:#c00;}
/* This is an additional attribute for font, which applies to the whole page for consistency */
body {font-family: verdana, tahoma, arial, sans-serif;}
</style>

I must emphasis that every single CSS selector, property, and value can (and should!) be modified to achieve the desired appearance. For guidance on how to use CSS selectors, properties, and values you could do no better that W3Schools for some easy instructions.

When we put it all together with the HTML the appearance is:

(Internet Explorer users will see an empty object above, and will need to check out the alternate view I’m afraid.)

There’s only one thing left to explain, and that is how the menu at Storm Trumpets appears to expand and contract when clicking on the menu items “Trumpets” and “Trombones”. This is surprisingly simple!

First, create a page that contains the <dt> tags without the <dd> tags. We’ll call this page “index.html”, and it represents your collapsed menu page. Make the first <dt> item a genuine link to a page that we call “item-one.html”

Next, create a page and name it “item-one.html”. The content of this page will explain broad details of the item, being the equivalent of the “Trumpets” and “Trombones” pages on the Storm Trumpets site. More importantly, this page should contain the menu again but this time to include the various list definitions contained in the <dt> tags. The “Trumpets” and “Trombones” pages each contain details of particular instrument models as definitions at this level, and each being a link to a further page with specifics of the item.

Once you have created these pages simply move back and forth between them in your browser, when the concepts should become clear. Once that happens, you can add and subtract all the <dt> and <dd> tags you like to achieve what you want.

I hope that this explanation is clear enough to encourage you to try playing around with definition lists and CSS. I must again acknowledge and thank Stu Nicholls for his inspirational work from which my menu “grew”.

Finally, if you are in the market for a trumpet, you know where to go!

Gary

This article was posted on Monday, November 28th, 2005 at 9:58 am