1. The HTML
  2. The CSS
    1. Drop down navigation
    2. Side menu
  3. Fun stuff
    1. Examples
    2. Files


What is the point of all those "#"s? I'm not linking anywhere specific, so I use the "#" character. Click one of those, and you don't leave the page you're on.

Note the placement of the nested ul. It is within an li set but after the a tag. This makes sense because the sub-list is a child of the item itself.


Now this is where the difference between the two menus becomes apparent.

Drop down

This works great in firefox, chrome, safari, and IE7. Not so well in IE6 - it doesn't like the li:hover.

But, not to worry, we can fix that. How? With Javascript!

I'll use Jquery, accessed via Google so we don't have to keep track of an extra file. Any JS library or even raw Javascript would do, though.

What we're doing with this code is assigning mouse event handlers to every li which is a descendant of ul.navigation. When you mouseover an item, it will add "current" to its CSS class list. It would be like writing <li class="current">.
When you move your mouse off of the li, it will remove "current" from the class list.

The important idea here is that in a sub menu, you are still moused over the parent li!
The submenu is nested within the list item.

If you're not bored out of your mind at this point, you're probably wondering what .find('> ul').addClass('child') is for. IE6 doesn't support child selectors - you may remember the ul.navigation li > ul from the CSS?
That tells the browser that what follows only applies to the ul directly below the li, not just any descendant ul somewhere down the tree. Without it, we're stuck writing longer and longer CSS for each level of the navigation. Not fun, and more than moderately error prone.

But good news, we can simulate it via Javascript, and better news, Jquery even implements child selectors within its search function!

Now that we have the Javascript all set up, it's time to revisit the CSS.

If we add that to our CSS file, everything should magically work. Of course, now that we have the Javascript working away, we could get rid of and reorganize the CSS.

It'll be a sweet day when I feel like I can disregard IE6 and make a drop down menu without Javascript.

Side menu

At this point i'm getting super bored/tired (it's now 6am), so I'll make this quick. With the same HTML, we can use the following CSS:

Now that we've got the general layout, we can use Javascript or PHP to interact with the user in whichever manner we choose.

But, Brad, what's up with the .side? I'm glad you asked, my imaginary friend. As you know, elements can be assigned more than one class. CSS allows us to list classes one after another.
These rules will only be applied if a ul contains both the navigation and the side class.

Quick review of that:

Fun stuff


example.html - You can play with the html, to see what happens