HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [122]
♦ Display the list as a block. display:block overrides the previous display:none instruction and displays the particular element as a block. The text reappears magically.
This hide-and-seek trick isn’t all that great on its own. It’s actually quite annoying to have the contents pop up and go away like that. There’s another more annoying problem. Look at Figure 3-6 to see what can go wrong.
To see why this happens, take another look at the CSS code that causes the segment to reappear:
li:hover ul {
display: block;
}
This code means set display to block for any ul that’s a child of a hovered li. The problem is that the Web Development li contains a ul that contains two more uls. All the lists under Web Development appear, not just the immediate child.
Figure 3-6:
If the mouse hovers on Web Development, both submenus appear.
One more modification of the CSS fixes this problem:
li ul {
display: none;
}
li:hover > ul {
display: block;
}
The greater than symbol (>) is a special selector tool. It indicates a direct relationship. In other words, the ul must be a direct child of the hovered li, not a grandchild or great-grandchild. With this indicator in place, the page acts correctly, as shown in Figure 3-7.
Figure 3-7: Now, only the next menu level shows up on a mouse hover.
This trick allows you to create nested lists as deeply as you wish and to open any segment by hovering on its parent.
My current code has a list with three levels of nesting, but you can add as many nested lists as you want and use this code to make it act as a dynamic menu.
Figure 3-8 illustrates how to open the next section of the list.
Figure 3-8: You can create these lists as deep as you wish.
I’m not suggesting that this type of menu is a good idea. Having stuff pop around like this is actually pretty distracting. With a little more formatting, you can use these ideas to make a functional menu system. I’m just starting here so you can see the hide-and-seek behavior in a simpler system before adding more details.
Building a Basic Menu System
You can combine the techniques of buttons and collapsing lists to build a menu system entirely with CSS. Figure 3-9 shows a page with a vertically arranged menu.
When the user hovers over a part of the menu, the related subelements appear, as shown in Figure 3-10.
This type of menu has a couple interesting advantages, such as:
♦ It’s written entirely with CSS. You don’t need any other code or programming language.
♦ The menus are simply nested lists. The XHTML is simply a set of nested lists. If the CSS turns off, the page is displayed as a set of nested lists, and the links still function normally.
♦ The relationships between elements are illustrated. When you select an element, you can see its parent and sibling relationships easily.
Figure 3-9: Only the top-level elements are visible by default.
Figure 3-10: The user can select any part of the original nested list.
Nice as this type of menu system is, it isn’t perfect. Because it relies on the li:hover trick, it doesn’t work in versions of Internet Explorer (IE) prior to 7.0. You need alternate CSS for these users.
Building a vertical menu with CSS
The vertical menu system works with exactly the same HTML as the hiddenList example — only the CSS changed. Here’s the new CSS file:
/* horizMenu.css */
/* unindent entire list */
#menu ul {
margin-left: -2.5em;
}
/* set li as buttons */
#menu li {
list-style-type: none;
border: 1px black solid;;
width: 10em;
background-color: #cccccc;
text-align: center;
}
/* display anchors as buttons */
#menu a {
color: black;
text-decoration: none;
display: block;
}
/* flash white on anchor hover */
#menu a:hover {
background-color: white;
}
/* collapse menus */
#menu li ul {
display: none;
}
/* show