![]() |
![]() |
![]() |
![]() |
||
![]() |
||
![]() |
Sample 2: Relatively positioned menu
This menu is relatively positioned and has the same style as Sample-1's, except that the spacing is set to 6 for a stronger overlapping effect.
Usually, the <DIV> tag or the <SPAN> tag is used to define a layer. In G2, the following formats are used to specify the holder(layer) for a relatively positioned menu:
<div id="holder_name" style="position:relative; visibility:visible;"></div>
<span id="holder_name" style="position:relative; visibility:visible;"></span>
The <DIV> tag places your holder at a new line(somewhat like using a <BR> tag), while the <SPAN> tag let you place several holders at the same position. Most of the time the holder is used to position the menu against certain object(say, an image, a link, a banner or a logo) in the web page, so a HTML table is used in most situations.
In this sample, first you build a table with its width set to "100%" and height set to 45, like this:
![]() |
![]() |
![]() |
![]() |
||
![]() |
||
![]() |
A transparent one-pixel gif image is used to show the background colors defined in the <TD> tags(though you don't need such a gif image in IE, but NN gives you no choice).
The border is set to 1 in this table, so that you can notice the column in the middle of the top row(<TR> alignment is set to "left" and "top"), that will be the place the holder for the menu sits.
Secondary, you define a layer in that column, the <SPAN> tag is used in this sample.
Then you have the following images for the top level menu:
These images have the width of 90 and height of 45, so they will fit into the table exactly.
Finally, you tell G2 to start rendering the menu at [-135,0] of the holder since the total width of 3 images gives 270, thus you have the menu shown in the center(almost) of the page.
Besides the advantage of being able to be associated with other HTML object, a relatively positioned menu can adjust its position just like a regular HTML object when the browser window is being resized. If you are using IE, try resizing your browser window and see how the menu adjusts itself. If you are using NN, the script reloads itself when you resize the window. It's not a good idea for a NN user to resize the window all the time, but at least you can get the idea of how a relatively positioned menu fits into windows with different sizes.
You might also notice that it's a menu bar in this sample. Actually all the differences between a menu bar and a pull-down menu are just the format of the top-level menu and the positions the first-level submenus to be shown. In G2, it's only a matter of setting one parameter.