|
|||||||||||||||
![]() | |||||||||||||||
Sample 3: Directions You might not really want to use menus in the way that this sample does, but it shows the ability of opening menus to different directions in G2(scroll to the bottom of the page to see two more menus). With directions, you can have your own "Start" button in the page. For an absolutely positioned menu, you have its coordinates, for a relatively positioned menu, you have its holder. In both cases, you will feel sure about where the top-left corner of the top level menu sits, assuming that it's a pull-down menu(or menu bar) and opens to the right by default. But, Where would that corner be if you are to open the menu in other directions? Well, let's take a look at how it works in G2.
The red dot is the coordinates of the absolutely positioned menu, likewise, the red corner is the top-left corner of the holder for the relatively positioned menu, and the blue area is where the top level menu will be shown. For example, given the coordinates of [10,10] for an absolutely position menu which pulls up to the left, the coordinates of the bottom-right corner of its top level menu will be [9,9]. Thus, to place the holder correctly is the key to position a menu relatively against other html elements. The "1 x 1 table" used in this sample might be a good idea to solve this issue. The "1 x 1 table" looks like the following: <table width="1" height="1" cellpadding="0" cellspacing="0" border="0"><tr><td><span id="holder_name" style="position:relative; visibility:visible;"></span><img src="your_one_pixel_transparent_gif" width="1" height="1" border="0"></td></tr></table> To build the "1 x 1 table" in NN, you have to put a "one pixel gif" inside the <td> tags. As mentioned before, with the <span> tag, you can place more than one holder at the same position, say, in this sample, "Menu A" and "Menu B" are in the same "1 x 1 table". With this method, you can easily position your menu along with other html elements. Of course, setting the border to "1" in the "1 x 1 table" will be helpful for testing purpose. Please be aware of that, in previous samples, "Menu-A", "Menu-B" and "Menu-C" are top level menu items of the same menu. In this sample, there are four menus instead, "Menu-A", "Menu-B", "Menu-C" and "Menu-D" are actually individual menus, though they are coupled. | |||||||||||||||
![]() | |||||||||||||||
|