| |
| |
The CSS Menu Wizard creates a CSS menu that has its items entered manually (not retrieved from a database) in the wizard interface. Use this command when you are not creating large menus or when you are simply not using any database.
Note: Non database-driven menus are sometimes referred as "static" menus (because their items information is entered manually).
You can apply the wizard in both .html pages and server model-based pages (.php, .asp, .cfm). No prerequisite content is required in page (meaning that the page can be empty when you apply this wizard). If later on you want to edit the static menu you created, use the corresponding Property Inspector panel added by the wizard.
The CSS Menu Wizard is accessible from the InterAKT tab of the Insert bar (or InterAKT menu item from the Insert menu):
The CSS Menu Wizard interface has three steps.
To set the interface options for the first step of the wizard, follow the instructions below:
In the Layout drop-down menu select one of the four available menu layouts.
In the Skin drop-down menu select the CSS skin to be applied to the menu.
Note: There are 23 available skins in MX CSS Menus. Click here to see all the provided skins and how they suit your menus.
The image below the two drop-down menus offers a quick preview of the menu about to be generated with the selected layout and the selected skin.
The buttons in the lower part of the interface (they appear on all steps of the wizard) offer the next functionalities:
With the < Back/Next > buttons you can navigate through the wizard's steps.
Click Finish when you are done configuring the wizard.
Click Cancel to exit without the new settings to be applied.
The Help button brings you to this help page.
Click Next to continue with configuring the wizard.
To set the interface options for the second step of the wizard, follow the instructions below:
In the For first level drop-down menu decide if to use text/labels or images for the first menu level (the menu "labels" are part of the image).
Note: To see a concrete example of using images for the first level, click here.
When you launch the wizard, the Items grid is empty and the four interface controls below it are disabled - they become enabled once you add menu items in the grid.
Notice the seven buttons above the Items grid. Use them to perform the following operations:
Click the Add item button to add a new menu item on the same level as the currently selected item in the grid.
Note: Use this button to add the very first element in the grid (menu item).
Except for when adding items on the first menu level and using images for them, after clicking the Add item button, the Add Menu Item dialog box pops-up asking for the menu item label:
When adding items on the first menu level and using images for them, after clicking the Add item button, the Select item image dialog box opens asking you to locate the image in the site structure:
Note: The image you select here will be displayed when the item is not selected in the menu, nor when the mouse pointer hovers it.
Click the Add sub-item button to add a new menu item as a sub-item for the currently selected item in the grid.
Note: The Add sub-item button is disabled when:
The very first element in the grid (menu item) is added, since there are no items yet (possible parents).
You try to add items on the third level in a menu using the Tab or the Expandable layouts (that can have at most two levels).
Click the Remove item button to remove the currently selected item in the grid.
To move a menu item up one level in the menu hierarchy click the left arrow button on top of the grid.
Note: If the item has sub-items, they will be moved accordingly (maintaining the relation with the parent item). This is also available for the next three operations.
To move a menu item one level deeper in the menu hierarchy click the right arrow button on top of the grid.
To change the order of a menu item and move it above/before others, use the up arrow button on top of the grid.
To change the order of a menu item and move it below/after others, use the down arrow button on top of the grid.
If you are using text for the first menu level, the Label text box below the grid is displayed for each menu item, no matter the level. Use this text box to edit the label (previously entered in the Add Menu Item dialog box) for the currently selected menu item in the grid:
If you are using images for the first menu level, the Image text box below the grid is displayed for menu items on the first level (when they are selected in the grid). Use this text box and the Browse button next to it to edit the site-relative path for the corresponding image (previously selected in the Select item image dialog box). For items on other levels, the Label text box is displayed.
In the URL text box specify the URL link to which the menu item points (when selected in browser). These links can be site-relative (use the Browse button to select the file from the site structure, and pass URL parameters if necessary) or external. The site external links should be completely given (including the protocol part: "http://", "ftp://" etc.).
The default value is #. It means that the current menu item, when clicked, does not point to any page.
In the Tooltip text box specify the tooltip (alternative text) displayed when the mouse pointer hovers the current menu item (in browser).
In the Target editable drop-down menu select the target window for the page opened when a menu item is selected. The fact that this drop-down menu is editable is useful for the site developers who use frames: enter here the name of the frames container.
The five available options are:
default (blank option that if left selected, considers the chosen target as _self)
_self
_blank
_parent
_top
Click Next to continue with configuring the wizard.
To set the interface options for the third (and last) step of the wizard, follow the instructions below:
The Sub-items animation drop-down menu is enabled only when you set the Vertical or the Horizontal layout in the first wizard step:
It gives you the possibility to select one of the provided sub-items animations, or to leave the default None option if you don't want any animation. The available animation types are:
Zoom
Fade
Slide
Check the Menu absolute position option if you want the menu position to be an absolute one (and not a relative one to the other page elements).
Leave the Highlight current item option checked if you want the currently selected menu item to be highlighted.
If in the first wizard step you selected the Tab layout, another checkbox will be displayed in the third step interface, namely the Persistent tab one:
Check this option if you want the second level items (in the Tab layout) to still be displayed when the mouse pointer leaves the menu area.
The Hover image filename text box is only enabled when you are using images for the first menu level. When the mouse pointer hovers a menu item from the first level, the corresponding image changes. Name all these image files according to the same pattern (starting from the initial image name): UniqueName_HoverCommonEnding.extension.
Specify the filename pattern (common ending) for these images in the Hover image filename text box: _HoverCommonEnding. The default value is _hover.
The Highlight image filename text box is only enabled when you are using images for the first menu level. When a menu item from the first level is selected, the corresponding image changes. Name all these image files according to the same pattern (starting from the initial image name): UniqueName_SelectedCommonEnding.extension.
Specify the filename pattern (common ending) for these images in the Highlight image filename text box: _SelectedCommonEnding. The default value is _selected.
Note: To better understand the role of these two text boxes, check out the How to use images for the first menu level tutorial.
After clicking Finish, you will notice in the Dreamweaver page the translator (illustration corresponding to the code block behind the action) added in Design view by the CSS Menu Wizard. The translator shows the first level menu items positioned corresponding to the selected layout.
The translator differs according to the option selected in the For first level drop-down menu:
If you chose to use text for the first menu level, the selected skin is shown:
If you chose to use images for the first menu level, the images are displayed:
The CSS Menu Wizard does not add anything in the Server Behaviors tab of the Application panel.
After generating the CSS menu, notice in the \includes\cssmenus2\skins site folder a folder named as the selected skin. It contains an images directory and four .css files, one for each of the four possible layouts.
To see how the page looks in browser after saving and uploading it to the server, click here.
Note: When creating an expandable menu with one of the two wizards, two links are generated in page above the menu, allowing you to show/hide all the items on the second level at once:
To see the Hide All | Show All links in action in browser, click here (the darko skin is used in this case).