JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Creating Drop-Down Menus with Lists

Although we don't talk about lists until Chapter 15, I'll advance you a technique for using them to format navigation links into drop-down (or pop-out) menus with CSS. You may want to come back to this section after having gone through that chapter.

To create drop-down menus with lists:

1.
In the (X)HTML file (Figure 12.11), create navigation links in the form of a nested list like the one on page 224. The first level items will always be visible, the second (and subsequent) level items will only be visible when hovered over.

Figure 12.11. Note that each of the submenus is a ul with its li elements within opening and closing tags of the top level li item. The links are empty to save space in this illustration, but clearly they'd have to have something there in the real world.


2.
Enclose the entire list in a div with a name like navbar.

3.
Enclose the rest of your page in its own div with a name like content.

4.
In the CSS (Figure 12.12), remove the default list formatting by using #navbar ul {margin: 0; padding: 0; list-style: none;}.

Figure 12.12. The basic code behind CSS drop-down menus is not complicated: remove the default formatting from the ul, float the list items horizontally, hide the second tier ul and make it appear only when hovered on. Clear floats for any content that follows.


5.
Next, make the whole link clickable (not just the text) and control its width by typing #navbar a {display: block; width:10em;}.

6.
To make the first level navbar items appear horizontally, type #navbar li {float: left; width:10em;}.

7.
To hide the second level list except when hovered over, type #navbar li ul {display: none}.

8.
To make the second level list appear when hovered over, type #navbar li: hover ul {display: block;width:10em;.

9.
To keep the rest of your page from bouncing around when the second level lists appear, add position: absolute;} to the previous line.

10.
To keep the rest of your page from floating next to the navbar, clear the float from the content div by typing div.content {clear:left}.

11.
Add extra formatting to make the menus pretty (Figure 12.15). You can find the CSS file used for formatting on the Web site (see page 26).

Tips

  • This technique only works on browsers like Firefox and Opera that fully support CSS' :hover pseudo-class (see page 146). Unfortunately, Internet Explorer (up to and including version 7), only supports :hover with a elements. What a waste! One way to make CSS menus work in IE is to add a bit of JavaScript. See Patrick Griffiths' Son of Suckerfish Dropdowns for one such technique (www.htmldog.com/articles/suckerfish/dropdowns/).

  • You might want to set a width (see page 174) or minimum width (also on page 174) for your page so that your navigation bars don't collapse when the page is too narrow. Unfortunately, as of version 7, IE doesn't support minimum width yet either.

  • You can accommodate browsers like IE that don't fully support :hover by making the top level items actual links to pages that contain the second level links. While IE users won't see your drop-down menus, they'll still be able to get to the pages where they lead.

  • You can use this technique to create vertical pull-out menus as well.


Figure 12.13. When no hovering is happening, the top level li items are visible but their ul babies (with the second level li items) are hidden.


Figure 12.14. When your visitor hovers over the list, the second level ul and its list items become visible.


Figure 12.15. This is the same code with some extra formatting. You can see both CSS files in full on my Web site (see page 26).



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→