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! 
October 5th, 2021 at 10:14 am
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!
October 5th, 2021 at 3:40 pm
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!
October 5th, 2021 at 4:34 pm
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!
October 5th, 2021 at 6:12 pm
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!
October 5th, 2021 at 7:59 pm
Hello, its fastidious paragraph regarding media print,
we all know media is a fantastic source of information.
October 6th, 2021 at 5:52 pm
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.
October 7th, 2021 at 10:08 pm
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!
October 8th, 2021 at 12:12 pm
I read this paragraph completely regarding the comparison of most recent and preceding technologies, it’s awesome article.
October 9th, 2021 at 2:31 am
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.
October 9th, 2021 at 9:25 am
Appreciate this post. Will try it out.
October 10th, 2021 at 9:23 pm
Very good article! We will be linking to this great
article on our website. Keep up the good writing.
October 11th, 2021 at 12:30 am
I visited various web pages however the audio quality for audio songs
present at this web page is in fact superb.
October 11th, 2021 at 10:55 am
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?
October 11th, 2021 at 8:51 pm
Incredible points. Solid arguments. Keep up the good spirit.
October 11th, 2021 at 10:28 pm
This is a topic that’s close to my heart… Many thanks!
Where are your contact details though?
October 11th, 2021 at 10:28 pm
новости финансов, и финансовые новости банков в республике казахстан
October 12th, 2021 at 10:52 pm
Hi, I read your blogs regularly. Your story-telling style is witty, keep doing what you’re doing!
October 13th, 2021 at 2:47 am
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.
October 13th, 2021 at 6:46 am
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!
October 13th, 2021 at 7:25 am
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!
October 13th, 2021 at 2:13 pm
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!
October 13th, 2021 at 3:02 pm
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!
October 14th, 2021 at 2:02 am
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.
October 14th, 2021 at 11:43 am
It’s going to be finish of mine day, however before end I am reading this great paragraph to
increase my knowledge.