After applying the CSS Menu Wizard in a Dreamweaver page (.html, .php, .asp, .cfm), you can later on edit the created "static" menu by using the corresponding Property Inspector. This properties panel is generated by MX CSS Menus and it allows you to modify the previously created static menu: change the skin, layout, menu items information etc.
To have the properties panel displayed, click anywhere inside the <div> corresponding to the static menu (a thin dotted line points it out in Design view) - for example, click inside one of the first level menu items included in the translator. The Property Inspector will be shown, allowing you to edit the following options:
Use the Layout and Skin drop-down menus to set a new layout, respectively a new skin for the static menu, as explained here.
With the Animation drop-down menu you can change the previously set animation type (for Vertical and Horizontal layouts). The drop-down menu is disabled for the Tab and Expandable layouts.
To edit the static menu (add, update, remove items) and its options click the Edit Menu Items button. The dialog box that pops-up has three tabs:
Configure the Items tab controls as explained here, with the exception that the For first level drop-down menu is disabled (after generating the menu, you cannot switch from text to images for the first level menu items, and the other way around):
Configure the Settings tab controls as explained here:
To configure the Sub-items tab controls, follow the instructions below:
In the Show sub-items time text box specify the time period, in milliseconds, after which menu sub-items will be displayed (when the mouse pointer hovers the parent menu item). The default value is 400 milliseconds.
In the Hide sub-items time text box specify the time period, in milliseconds, after which menu sub-items will be hidden (when the mouse pointer leaves the parent menu item area). The default value is 200 milliseconds.
Note: By setting these two times properly, it will be possible to reach any menu sub-item directly from the parent item, even though the mouse pointer hovers on its way other items from the parent level. Due to the Hide sub-items time, the sub-items you are interested in will still show, and due to the Show sub-items time, sub-items from eventual parent items that are hovered on the way are not instantly shown. This feature is called the "mouse-stabilizer".
In the Close all sub-items time text box specify the time period after which all opened sub-menus (in the same branch, obviously) will be hidden. The default value is 800 milliseconds.
Note: The only menu layout for which these three time controls are not enabled is the Expandable one.
In the first Horizontal offset text box specify the horizontal offset (positive or negative) for the 2nd level sub-menus relative to their parent menu item. This is the horizontal distance between the right edge of the parent item container and the left edge of the sub-items container.
In the first Vertical offset text box specify the vertical offset (positive or negative) for the 2nd level sub-menus relative to their parent menu item. This is the vertical distance between the top edge of the parent item container and the top edge of the sub-items container.
In the second Horizontal offset text box specify the horizontal offset (positive or negative) for sub-menus on the 3rd or greater levels, relative to their parent menu item.
In the second Vertical offset text box specify the vertical offset (positive or negative) for sub-menus on the 3rd or greater levels, relative to their parent menu item.
Note 1: The default values for these four offset properties depend on the selected skin and layout.
Note 2: These four controls are enabled only for the Vertical and Horizontal menu layouts, if there are more than one, respectively two levels.
The three buttons in the top-right part of the interface offer the next functionalities:
Click OK when you are done configuring the dialog box.
Click Cancel to exit without the new settings to be applied.
The Help button brings you to this help page.
Click the Edit CSS Skin button to open the CSS Skin Editor and visually edit the current skin used for the menu, or to create a new skin starting from this one.
If you want to remove the static menu from page click the Remove Menu button. You will be asked for confirmation first:
If you want to continue with removing the menu, click Yes.
The Property Inspector provided by the CSS Menu Wizard offers a very simple and handy manner for further editing of the static CSS menu. Differently from other wizards, this one does not add any server behaviors, but a complete Property Inspector that allows you to edit all the static CSS menu settings.
Click here to see in browser a static menu built with CSS Menu Wizard.