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


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

  1. e cigarette expo Says:

    Hey! I know this is somewhat off-topic however I needed to ask.
    Does running a well-established blog such as yours take a lot of work?

    I’m brand new to operating a blog however I do write in my diary every
    day. I’d like to start a blog so I can easily share my experience and thoughts
    online. Please let me know if you have any kind of recommendations or tips for brand new aspiring blog
    owners. Appreciate it!

  2. mcm bag sale Says:

    Pretty nice post. I simply stumbled upon your
    blog and wished to say that I have really loved surfing
    around your weblog posts. After all I’ll be subscribing to your rss feed and I hope you write again soon!

  3. 그녀의 braless boobs showing on the street Says:

    It’s the best time to make a few plans for the future and it’s time to be happy.
    I’ve read this submit and if I could I desire to
    suggest you some fascinating issues or tips. Maybe you
    could write subsequent articles relating to this article.
    I desire to learn even more things about it!

  4. nail art ideas Says:

    You are so interesting! I do not suppose I’ve truly read something
    like this before. So nice to find someone with some unique thoughts
    on this subject. Really.. many thanks for starting
    this up. This website is one thing that is required on the internet, someone with a little originality!

  5. mgm 카지노 Says:

    Hello, its fastidious paragraph regarding media print,
    we all know media is a fantastic source of information.

  6. money market Says:

    Good day I am so thrilled I found your weblog, I really found you by error, while
    I was researching on Bing for something else, Anyhow I am here now and would just like to say thank you for a remarkable post and
    a all round interesting blog (I also love
    the theme/design), I don’t have time to read it all at the moment but I
    have saved it and also included your RSS feeds, so
    when I have time I will be back to read a great
    deal more, Please do keep up the great job.

  7. mcgill online bookstore Says:

    Hi there, I found your blog by means of Google while
    looking for a similar matter, your site got here
    up, it seems good. I have bookmarked it in my google bookmarks.

    Hi there, simply was aware of your weblog via Google, and found that it’s really informative.

    I am gonna be careful for brussels. I will appreciate in the event you continue
    this in future. Lots of folks will probably be benefited from your
    writing. Cheers!

  8. prime jewelers Says:

    I read this paragraph completely regarding the comparison of most recent and preceding technologies, it’s awesome article.

  9. ridge home furnishings Says:

    We stumbled over here coming from a different website and thought I may as well check things out.
    I like what I see so i am just following you. Look forward
    to exploring your web page yet again.

  10. wireless lan tv Says:

    Appreciate this post. Will try it out.

  11. vanilla liqueur Says:

    Very good article! We will be linking to this great
    article on our website. Keep up the good writing.

  12. hairdresser las vegas Says:

    I visited various web pages however the audio quality for audio songs
    present at this web page is in fact superb.

  13. homeland rentals Says:

    Thanks for the auspicious writeup. It if truth
    be told used to be a entertainment account it.

    Look complicated to more added agreeable from you!
    By the way, how could we keep up a correspondence?

  14. imposters season 3 Says:

    Incredible points. Solid arguments. Keep up the good spirit.

  15. electra complex Says:

    This is a topic that’s close to my heart… Many thanks!
    Where are your contact details though?

  16. новости рынка форекс Says:

    новости финансов, и финансовые новости банков в республике казахстан

  17. narcolepsy treatment medication Says:

    Hi, I read your blogs regularly. Your story-telling style is witty, keep doing what you’re doing!

  18. motorcycles Says:

    What’s Going down i’m new to this, I stumbled upon this I have discovered It
    positively helpful and it has helped me out loads.
    I’m hoping to contribute & assist different customers like its
    helped me. Great job.

  19. beauty creations cosmetics Says:

    Heya are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get
    started and set up my own. Do you require any html coding knowledge to make your own blog?

    Any help would be really appreciated!

  20. asphalt driveway price Says:

    When I initially left a comment I seem to have clicked on the -Notify me when new
    comments are added- checkbox and from now on each time a comment is added I get 4 emails with the
    exact same comment. Perhaps there is a means you
    are able to remove me from that service? Cheers!

  21. price floor Says:

    I absolutely love your site.. Pleasant colors & theme. Did
    you build this site yourself? Please reply back as I’m trying to create my own site and want to know where you
    got this from or just what the theme is called.
    Thank you!

  22. mens checkbook wallet Says:

    Greetings! This is my 1st comment here so I just wanted to
    give a quick shout out and say I genuinely enjoy reading your
    posts. Can you recommend any other blogs/websites/forums that cover the same subjects?
    Thank you so much!

  23. nj escorts Says:

    Does your site have a contact page? I’m having problems locating it
    but, I’d like to shoot you an email. I’ve got some suggestions for your blog you might be interested in hearing.
    Either way, great website and I look forward to seeing it improve over time.

  24. 카지노 Says:

    It’s going to be finish of mine day, however before end I am reading this great paragraph to
    increase my knowledge.

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 Franki is trying to buy a bigger hard disk to support this site.
</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:   September 25, 2023, 1:50 pm
  Time in Franki's part of the world is:   September 26, 2023, 2:50 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.