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


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

  5. showbox Says:

    I have perused your article, it is exceptionally useful and accommodating for me.

  6. living room Says:

    After study several of the blog posts on your internet site now, we really such as your method of blogging.

  7. showbox apk Says:

    What a really awesome post this is. Truly, one of the best posts I’ve ever witnessed to see in my whole life. Wow, just keep it up.

  8. half angle formula Says:

    I have express a few of the articles on your website now, and I really like your style of blogging. I added it to my favorite’s blog site list and will be checking back soon…

  9. test phases Says:

    It proved to be Very helpful to me and I am sure to all the commentators here!

  10. trig identities Says:

    Its as if you had a great grasp on the subject matter, but you forgot to include your readers. Perhaps you should think about this from more than one angle.

    trig identities

  11. Auto Ankauf Says:

    nice one, I thoroughly enjoyed reading your article. I really appreciate your wonderful know-how and the time you put into educating the rest of us.

  12. texas colleges Says:

    Some truly interesting information, well written and broadly speaking user pleasant.

  13. vin check sa Says:

    Brand Equity! Beyond the quality of the product,

  14. driver knowledge test Says:

    Yes i am completely concurred with this article

  15. revs Says:

    Appreciate it for this grand post, I am glad I discovered this web site on yahoo.

  16. Oscars winners Says:

    A fascinating dialog is value remark. I feel that it is best to compose more on this matter,

  17. allegheny county real estate Says:

    This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

  18. Kitchen remodeling Says:

    I appreciate everything you have added to my knowledge base.Admiring the time and effort

  19. garage door fix Says:

    I became just browsing in some places but got to learn this post.

  20. custom patches Says:

    This is really an incredible read for me. I have bookmarked it and I am anticipating perusing new articles. Keep doing awesome!

  21. Eyal Nachum Says:

    I am usually to blogging and i genuinely appreciate your content regularly.

  22. hazard perception test wa Says:

    Articulately written and well figured out.

  23. Federal Pacific panel Says:

    I am continually searching online for ideas that can aid me. Thx!

  24. Albagora Says:

    That’s why marketing and advertising that you simply applicable exploration previous to publishing. It will be easy to write down superior write-up that way.

  25. mp3 juice Says:

    This particular thread may seem to get quite a few page views.

  26. showbox apk 4.93 download for android Says:

    this is a very good site thanks for sharing this with us…

  27. notepad download windows 10 Says:

    The material and aggregation is excellent and telltale as comfortably.

  28. mobdro premium Says:

    very good and interesting website thanks for sharing this with us..

  29. Getting married in Paris Says:

    Hey, you used to write wonderful, but the last several posts have been kinda boring…

  30. more information Says:

    Much obliged for setting aside an ideal opportunity to examine this, I feel firmly about it and love adapting more on this point.

  31. Says:

    Its in the same way an excellent write-up that i unquestionably appreciated studying.

  32. paid focus groups portland Says:

    I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own Blog Engine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

  33. fizzwizzy Says:

    Hey, I discover perusing this article a delight. It is greatly useful and intriguing and all that much anticipating perusing a greater amount of your work.

  34. best offers Says:

    This sort of appears completely greatest. Each one of these small info tend to be produced as well as plenty of background info. I favor which a great deal.

  35. Pay Weekly Mattresses Says:

    There are two extra steps you should take when you see a consumer protection organization’s logo on a website.

  36. deneme bonusu veren siteler Says:

    Your writing style in fact is exceptional!

  37. champagnelady Says:

    Good post. I will be dealing with some of these issues as well..

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 needs a new ski handle for his favorite toy.
</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:   May 26, 2020, 8:39 pm
  Time in Franki's part of the world is:   May 27, 2020, 9:39 am
  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.