home about us contact us

free scripts advanced scripts online tools great books web related tutorials contributed tutorials news archive geek toys!

help forum live chat help

Selected article

RSS feed   enewsbar Live Subscribe    Add to MyYahoo    Add to Google

Other HTMLfixIT articles:

by Gary

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:

    <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>

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:

    <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>

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;}

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! ;-)


4 Responses to “Expanding / Collapsing Menu with HTML & CSS (updated)”

  1. Brett Bellomo Says:

    Is there any academically solvent HTML quiz,–something probably with word problems,(with real life situations)or word problems with situations that can include html code or mathematic references,–soemthing that would look very logical when presented.—Probably looking at multiple situations,–something applied to different error messages on the net,or on the computer,etc….
    Private email only
    8 yrs sft hd gm grph prhps hobby.thanks.—
    can point to ncaa type quizzes,or ibm/msoft certified type as well.

  2. pmeier76 Says:

    Whatever amount you feel this site was worth to you would be just wonderful.Internetshop for mobile devices: android handy kaufen

  3. Coimbatore Says:

    This is good tutorial. But what i was expecting the Expanding and Collapsing Menus. i.e., like side bar where a link click will show more sublinks.

    The example is found here..

  4. Best ID Card Says:

    Nice Tutorial. I suppose to search for Good and Safety Signs and end up here.

Leave a Reply

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Don likes to feel he has helped keep Franki in BBQ sauce.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

  Time  in  Don's  part  of the world is:   October 23, 2019, 7:59 am
  Time in Franki's part of the world is:   October 23, 2019, 8:59 pm
  Don't worry neither one sleeps very long!

privacy policy :: support us :: home :: live chat help
contact us :: forum ::tutorials :: bookstore :: Site Map

      Valid XHTML 1.0!             powered by Apache Server
Pic 3 Pic 3


CIGHTML Firefox Thunderbird ClamWin WordPress SpyBot S&D TheGIMP Apache for Windows Registry Cleaners More cool stuff:


HTMLfixIT Site Stats.

Browser Statistics
Internet Explorer 85.88%
IE 717.63%
IE 62.3%
IE 50.00%
IE other8.6%
Moz Firefox 3.x3.03%
Moz Firefox 2.x0.18%
Moz Firefox 0.x/1.x26.65%
Netscape 8.x0.00%
NS 6+/Mozilla2.73%
Moz Seamonkey0.00%
Netscape 4.x0.00%
Opera 9.x0.00%
Opera 8.x0.00%
Opera 7.x0.42%
Opera 6.x0.00%
Opera other0.42%
Safari Mac/Intel5.21%
Safari Mac/PPC0.06%
Safari Windows25.2%
Google Chrome1.51%

Resolution Statistics
640 x 4800.25%
800 x 60026.14%
1024 x 76836.55%
1152 x 8640.25%
1280 x 80011.68%
1280 x 8540.00%
1280 x 102417.01%
1400 x 10500.00%
1600 x 12001.02%
1920 x 12007.11%
2560 x 10240.00%

OS Statistics
Windows 741.55%
Windows Vista2.4%
Windows 20033.91%
Windows XP20.86%
Windows 20000.36%
Windows NT40.05%
Windows 98/ME0.05%
Windows 950.00%
Mac OSX8.03%
Mac Classic0.00%

New Windows Virus Alerts
also by sophos.

17 Apr 2011 Troj/Mdrop-DKE
17 Apr 2011 Troj/Sasfis-O
17 Apr 2011 Troj/Keygen-FU
17 Apr 2011 Troj/Zbot-AOY
17 Apr 2011 Troj/Zbot-AOW
17 Apr 2011 W32/Womble-E
17 Apr 2011 Troj/VB-FGD
17 Apr 2011 Troj/FakeAV-DFF
17 Apr 2011 Troj/SWFLdr-W
17 Apr 2011 W32/RorpiaMem-A

For details and removal instructions, click the virus in question.