 | |||||
|
|
|
|||
|
menu item | |
|
||
|
|||||
|
|||||
|
|||||
|
menu item | |
|
||
|
|||||
|
|||||
| ||||
|
|
|
||
|
menu item | |
||
|
||||
|
||||
|
||||
|
menu item | |
||
|
||||
|
||||
Sample 1: Absolutely positioned menu
This menu is absolutely positioned at [0,10]. The top-level menu is a pull-down menu of 3 image items, which have mouse-over swapping effects and give a look like pull-tabs(this page makes the left-margin of the document slightly larger than the width of these images).
The top-level menu has the padding width, padding height, spacing, border and submenu tag set to zeros(off), and the submenus have them set to 6, 1, 2, 1(on) and 1(on) respectively. These figures work somewhat like those in a HTML table:
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
spacing | |
padding height | |
padding width | |
submenu tag |
For menus open to the left, the submenu tags will be placed on the left side. If you set the border to 1(on), you should have the spacing set to no less than 1.
A submenu will overlap the spacing space of its parent menu. You might want to make some room in the image for the submenu tag so that the submenu won't 'touch' the tag. Like this: 
Setting the spacing to a larger value gives you a stronger overlapping effect.
In G2, you can use images as menu items with mouse-over swapping effects. The images used in this sample are:
