Figure 3-7: Now, only the next level of menu shows up on a mouse hover in Java

Generate PDF417 in Java Figure 3-7: Now, only the next level of menu 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 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

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 sub-elements 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 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 70

The vertical menu system works with exactly the same HTML as the hiddenList example only the CSS changed Here s the new CSS file:

/* horizMenucss */ /* unindent entire list */ #menu ul { margin-left: -25em; } /* 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 submenus on hover */ #menu li:hover > ul { display: block; margin-left: -2em; }

Of course, the CSS uses a few tricks, but there s really nothing new It s just a combination of techniques you already know:

1 Un-indent the entire list by setting the ul s margin-left to a negative value to compensate for the typical indentation 25em is about the right amount Because you ll be removing the list-style types, the normal indentation of list items will become a problem

Each li tag inside the menu structure should look something like a button Use CSS to accomplish this task:

/* set li as buttons */ #menu li { list-style-type: none; border: 1px black solid;; width: 10em; background-color: #cccccc; text-align: center; }

a Set list-style-type to none b Set a border with the border attribute c Center the text by setting text-align to center d Add a background color or image, or you ll get some strange border bleed-through later when the buttons overlap

3 Format the anchors as follows:

/* display anchors as buttons */ #menu a { color: black; text-decoration: none; display: block; }

c Set display to block (so the entire area will be clickable, not just the text)

when the user hovers over the element:

/* flash white on anchor hover */ #menu a:hover { background-color: white; }

Because the anchors no longer look like anchors, you ll have to do something else to indicate there s something special about these elements When the user moves the mouse over any anchor tag in the menu div, that anchor s background color will switch to white