Graphics Programs Reference
In-Depth Information
Figure 5-11: The pop-up menu.
h is can go to any level of nested menu, in fact. You can have seventeen-level-deep nested
menus if you so desire. You should quite probably be ashamed of that desire, but you can
fuli ll it regardless.
In terms of placement of menus, you're limited only by the two-dimensional plane of the page
and your own imagination. You can put the top-level menu entries across the top of the page
and the i rst-level submenus below them, as in Figure 5-12, with second-and-later menus
popping out to the side. It's just a matter of writing the necessary CSS. It would go something
like this:
ul.menu
>
li
{
display
:
inline
;
position
:
relative
;}
ul.menu
ul
{
display
:
none
;}
ul.menu
li.sub:hover
>
ul
{
display
:
block
;
position
:
absolute
;
white-space
:
nowrap
;}
ul.menu
>
li.sub:hover
>
ul
{
top
:
100%
;
left
:
0
;}
ul.menu
ul
li.sub:hover
>
ul
{
top
:
0
;
left
:
100%
;}
169
h at way, only the top-level menus drop down. h e rest would go to the right of their parents.
Figure 5-12: Dropdown menus.
BOXPUNCHING
Sometimes, you want things to be a little bit irregular. h at's easy to do with the boxpunch
technique, which is a way of visually removing parts of a box. It works only on l at color or
i xed-image backgrounds, but that leaves a lot of room.
Search WWH ::
Custom Search