After you create a JavaScript Web Menu by Sothink DHTML Menu, you may want to know its exact size, including width & height, and then modify it. Sometimes you may also want to find out the X position and Y position of the menu after the menu is published to the webpage. Here comes an easy built-in tool for you to make it — Ruler!
This function can layout your menu perfectly, which makes the whole menu and each menu item get the precise size. So it is convenient for you to configure the background image of menu item; the position of menu and its popup items can also be set separately as well.
You can also set the “Page Margin” in Preview Setup to position the menu in your webpage more precisely.
The current coordinates of the mouse show as X 132 and Y 2 in the right bottom of the state bar.
F.A.Q:
1. How to show ruler?
— There are two ways to show ruler, one is to click “View > Ruler” on the menu bar; the other is to press shortcut key Ctrl+R.
2. Can I change the measurement units?
— Yes. Just right-click anywhere within the ruler and the ruler settings will popup. The available units are pixel, inch, or centimeter. And the default measurement unit is pixel.
3. How to change the coordinate origin (in order to calculate the size value of the whole menu and each menu item)
— You can change coordinate origin to help you calculate the size value easily. Just press down the mouse in intersection area of horizontal ruler and vertical ruler, and then drag the crossing down to the position where you want the coordinate’s origin locates. When dragging the crossing, a horizontal and a vertical line will appear to guide you. The new coordinate origin is the intersection of horizontal guide and vertical guide line.
Intersection area
Take above image for example: new 0 in the top ruler moves 300 pixels right; and new 0 in the left ruler moves 200 pixels down, the crossing is the new coordinate origin. To restore the ruler coordinate origin, you can right-click anywhere within the ruler and choose “Reset”.