With CSS Menu Writer, you can easily build a horizontal or vertical CSS navigational menu. CSS Menu Writer offers a variety of design presets, as well as page presets, that you can customize. This tutorial will guide you step-by-step through the process of creating the perfect navigation to match your website.
- Dreamweaver CS3 or higher.
- Design Extender (alternatively, CSS Menu Writer) installed and activated in Dreamweaver.
- A site defined in Dreamweaver. If you need assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
- A PHP web page and connection in Dreamweaver to your database. If you need assistance, view this tutorial: Create a PHP database connection.
- Or instead of a PHP page, an HTML web page.
To easily apply your navigation to all the pages in your site, it is advised that you insert your menu within a Dreamweaver template that is applied to all the pages in your site. This way, menu updates that you save will be quickly applied to all pages.
CSS Menu Writer wizard allows you to quickly insert a horizontal or vertical CSS menu to your site.( Later in this tutorial, you will learn how to re-enter the wizard to modify your menu.)
- In Dreamweaver, open a page you wish to contain your menu. Save it as a PHP or an HTML web page.
- Place your cursor in the region of your page (or template) where you wish to have the menu inserted, typically the topnavigation div in CSS Sculptor designs.
- Choose WebAssist > CSS Menu Writer.
- From the Contents menu, choose from a number of preset navigation items that best match the type of site you are working with. Or, choose <New from blank> to manually specify each menu item.
The Contents options are provided to help speed up the menu development process. If you anticipate having multiple items in your navigation, choosing the most applicable option and modifying the contents can save a lot of time.
- From the Type menu, choose Horizontal or Vertical navigation.
- From the Category menu, choose the design that best suits your needs.
- From the Theme menu, choose the color scheme that best matches your anticipated design.
The CSS Menu Writer wizard provides you with many options and settings that allow complete customization of your horizontal or vertical navigation.
- Access the CSS Menu Writer by choosing the first Define button.
- Select the Add icon.
- Choose Add new static link and click OK.
- In the Label field, enter the text you wish to appear on the menu.
- Choose the Link Browse icon, or enter the path to your menu item.
- Click Finish. Your new menu item is inserted within the menu structure tree where you can modify the existing menu content and re-order the structure.
- Once you have customized your menu structure as desired, click Finish to return to the primary CSS Menu Writer interface.
For assistance with adding dynamic menu items refer to How to create a dynamic menu using CSS Menu Writer 2.0. Please note, this PDF document is being updated. When finished, a link to the new tutorial will be available here.
The CSS Menu Writer 3-tab interface allows you to customize your menu's theme, also known as the design, at each individual level of the navigation.
- Access the 3-tab modification interface by choosing the second Define button.
- Overview of the three modification tabs:
- The Box tab provides options for customizing the width, height, padding, and margin for the various elements of your menu.
- The Type tab provides options for specifying the font style, font size, and font color for the various text elements in your menu.
- The Design tab provides options for customizing the background colors, background images, and borders for your menu’s design.
- Menu Level window:
- Each of the three tabs include the Menu Level window which displays the various levels of your navigation.
- You can add or delete levels, and switch your menu from horizontal to vertical navigation at any time.
If you delete a level, any menu items for that level will inherit the properties for the level above it.
- Click on the Box tab to modify your menu’s width and height or margins and padding:
- From the Menu Level window, select the level of navigation you wish to customize.
- Group modifications are applied to all items within the selected level.
- Item changes are applied to the individual items within the selected level.
- Specify any settings you like. For example, to modify the width of the menu items, choose the Item tab, specify the width, and select the units (if applicable) for the selected menu component.
- Select the next menu level you wish to modify from the Menu Level window.
- Make any changes to the settings.
- Click the Refresh icon to preview your modifications in the Preview window.
- Click on the menu in the preview window to view the menu in your browser.
- Click on the Type tab to modify your menu’s text properties:
- From the Menu Level window, select the level of your navigation you wish to customize.
- Choose whether you wish to customize the Link, Visited, Hover, or Active state of your menu’s text.
The Link state is the primary state for your menu. If there are no styles defined for the other 3 tabs, the text will display according to the Link state styles.
- Specify the settings you would like for your text.
- Continue to make changes to the other states until you have the text properties you desire.
- From the Menu Level Component Window, select the next menu level you wish to customize.
- Make any modifications to the type properties for the various states.
- Click the Refresh icon to preview your changes.
- Click on the menu in the preview window to view the menu in your browser.
- Click on the Design tab to modify your menu’s color, images, and borders:
- From the Menu Level Component Window, select the level of your menu you wish to customize.
- Choose whether you wish to customize the Link, Visited, Hover, or Active state of your menu’s design.
- Choose the appropriate Background tab depending on the change you wish to make.
The <span> tag allows you to specify a right cap image to create a rounded edge appearance to your menu item.
The <a> tag allows you to specify a left cap image to create a rounded edge appearance to your menu item.
The <li> tag sets the background properties for the menu item.
- Make any desired change to the background of your menu.
- Specify a border, if desired.
- Choose any other menu levels or a different link state to make further customizations.
- Click the Refresh icon to preview your changes.
- Click Finish.
CSS Menu Writer will provide you the option to save a preset after you click Finish in most interfaces. This option is presented to you after customizing the menu content and menu theme.
It is recommended that you save a new preset each time, allowing you to reuse your custom menu content and design for other websites. Also, this allows you to maintain a backup by exporting the layout from the WebAssist Preset Manager.
- Select the Save as preset checkbox.
- Choose a Category, or enter a new category name.
- Choose a Theme, or enter a new theme name.
- Click Finish.
After creating your CSS Menu Writer navigation, you can re-enter the wizard to make additional changes at any time.
- In Dreamweaver, select the the Design view.
- Click inside the menu on your page.
- From the Properties Inspector, click Edit Menu to further customize your navigation.
Or if you are working with HTML pages, Dreamweaver must have Scripts set to display under Invisible Elements. You can then select the script icon beside your menu to display the CSS Menu Writer Properties inspector.
- Edit > Preferences.
- Select Invisible Elements from the Category column.
- Make sure Scripts is checked.
- Click OK.
What do you need to start?
Print tutorial
