Universal CSS Navigation Menu: Advanced CSS Styling

The Universal CSS Navigation Menu comes with multiple great designs that can be used to fit a menu into a website. However some times you need just a bit more CSS Styling to make them fully fit your site.

This tutorial describes the way to add or edit CSS classes to customize the Universal CSS Navigation Menu.

2.How to use

This tutorial can be used to either edit existing CSS Styles or to create completely new CSS Styles.

2.1.Editing existing CSS Styles

The best way to edit CSS Styles for the menu is to create a new CSS file. If changes are made to the original CSS file, all the changes will be overwritten when the extension is updated.

The creation of a new CSS file is fully supported within Dreamweaver. Click the New CSS Rule button in the CSS Styles Panel.

The New CSS Rule window appears. Choose Compound as the Selector Type. In the second field named Selector Name, enter the name of the selector that needs to be added. The names of the selectors are shown in the examples.

Choose (New Style Sheet File) in the third field named Rule Definition and click OK. Every next time a new CSS rule has to be added, the custom CSS file can be selected in the Rule Definition field.

The window Save Style Sheet File As will open. Select the location where to save the new CSS file (for example in the Styles folder in the root of your website) and enter a name for the file.

After all the values have been set, click OK to save. The new file will be automatically included to the page that was open.

Now also include the file on all the pages containing the menu and upload all these pages. If your website uses a template, include the file in your template.

In the CSS Styles Panel click the Attach Style Sheet button.

Click the Browse button behind the File/URL field. Browse to the location where the custom CSS file was saved. Select the file and click OK to add it to the field. Make sure the Link radio button is selected and click OK once again to include the file on the page.

Next upload the new CSS file and all the pages were this CSS file was included.

2.2.Creating new CSS Styles

Besides editing the existing styles that come with the menu, it is also possible to create a completely new design. The procedure to do so is already described in an FAQ named Create a new Menu design and save for future use and can be found at: http://www.dmxzone.com/go?17259.