I tend to make a lot of lists -- lists of things I need to do today, over the weekend or before Lovey gets home from work. Lists of things I want to do. Lists of things I have to do. An inveterate list maker, that's me.
- to do lists
- grocery lists
- books to read lists
- movies to watch list
- life lists
There -- I just made a list of lists.
However, within those lists there reside other lists.
- To Do
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
- Grocery List
- breakfast
- lunch
- dinner
- household
- Books to Read
- Fiction
- Non-Fiction
- Movies
- Shane
- Stagecoach
- The Matrix
- Matrix Reloaded
- Matrix Revolutions
- Bladerunner
- The Great Escape
- 2001: A Space Odyssey
- Pulp Fiction
- Life
- Raise kind and generous sons
- Write a novel
- Make really good sourdough bread
- Run another marathon
- Ride through Death Valley on a bicycle
- Live long enough to enjoy grandkids
- Go on a second honeymoon
- See the Northern Lights
- Climb Half Dome
- Build a robot
Eventually, this list, which began simply enough, will become totally unwieldly. On scraps of paper it may be fine, but transfer this list to a web page, and it is about as clear and exciting as a cold bowl of plain spaghetti.
Of course, a little JavaScript could turn this in to several drop down lists, but what if scripting isn't an option? With XHTML and a little bit of CSS, this list can be transformed a navigable menu.(However, if you do decide you do want to tweak your lists with a wee bit of JavaScript, check out Suckerfish Dropdowns.)
First, we'll divide the list o' lists in to categories
<ul id="navlist">
<li>To Do</li>
<li>Grocery</li>
<li>Books</li>
<li>Movies</li>
<li>Life</li>
</ul>
Then style this to a horizontal list.
#navlist li{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#navlist {
padding-left: 30%;
border-bottom: 2px solid green;
}
So far, so good.
To make the links behave -- just changing state whenever I hover over them -- we can add a bit to the style sheet.
The XHTML is written like this.
ul id="navlist">
<li><a href="#">To Do</a></li>
<li><a href="#">Grocery</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Life</a></li>
</ul>
Notice how instead of using div, I used the ul element tag itself. You can always use block-level elements (<ul>, <p>, <form>, etc.) for ids when available. This produces a cleaner, leaner code that is bandwidth friendly.
Next is the style.
#navlist a:link, a:visited{
text-decoration:none;
}
#navlist a:hover{
font-weight: bold;
font-style: italic;
text-decoration:none;
color: red;
}
This will add some snap for the user when they hover over one of the main list items. From here, we can now add our clickable pseudo-dropdown lists.
#droplist{
margin:2% 0 0 41%;
font-family:verdana;
list-style: none;
}
The first three lists come across as basic and vague. To add more detail -- perhaps to list exactly what you're going to do on Monday -- and still stay within our model, use handy but under-utilized definition lists. I'll use Books as an example.
First make a three minor modifications to the existing style since we added a new div - #droplist - to the markup.
#navlist a:link, a:visited, #droplist a:link, a:visited{
text-decoration:none;
}
#navlist a:hover, #droplist a:hover{
font-weight: bold;
font-style: italic;
text-decoration:none;
color: red;
}
#droplist, #booklist{
margin:2% 0 0 41%;
font-family:verdana;
list-style: none;
}
Then add the definition list to the existing code and there you go.
<dl id="booklist">
<dt><b>Fiction</b></dt>
<dd>Dune - Frank Herbert</dd>
<dd>Winter's Tale - Mark Helprin</dd>
<dd>Ender's Game - Orson Scott Card</dd>
<dd>Horton Hears a Who - Dr. Seuss</dd>
<dd>The Subtle Knife - Phillip Pullman</dd>
<dd>Islands in the Stream - Ernest Hemingway</dd>
</dl>
I hope this article has been helpful for anyone looking to build a robust and navigable list. There are plenty of other resources available, probably the best one being Listamatic.
Enjoy.
