CSS Flexi Menus banner


Flexi CSS Menus Documentation

box Flexi CSS Menus

With the Flexi CSS Menus Dreamweaver extension you can create beautiful pure CSS menus that will work the same in all browsers. To save time, you can start from any of the 45 dropdown, vertical and tabbed templates and create your own color scheme to make the CSS menu blend perfectly with your overall site layout. There is no need to code or know CSS as all the menu settings are done quickly from the Dreamweaver interface.

Marking a button as active page (selected) in Flexi CSS Menus

You will probably want to have the menu showing the current page with a different style to ease up the visitor navigation. This doesn't require any coding with the Flexi CSS Menus and it's very easy to do. It's a 2 steps process:

  • marking the page as being current (selected) in the menu structure
  • creating the current page (selected) style for the button

Note: for this tutorial we will assume that you know how to locate the Flexi CSS menus extension and understand the Insert menu interface elements.

Marking the page as being current (selected) in the menu structure

Marking the page as being current is very easy. In the Insert/edit Flexi CSS Menus interface you can browse the menu structure and mark any entry as being selected. The extension will also automatically mark as selected the parents of the button you set selected. For example, if you mark the Pricing button as selected, Product2 and Products will also be selected.

Selected button

Creating the custom selected styles

Before editing the styles to create the selected flavor for the current button, as the pricing button is on the third level and the Product2 and Products buttons should also show as selected we need to create selected styles for main menu and secondary menu as well.

There are a few elements that can be customized to create the custom selected style:

  • text
  • arrow
  • design

Note: the selected style is created for all the menus on one level and not individually for each button. So for example if you define the selected style for the main menu buttons, if you mark Pricing as selected the Products button will appear as selected, if you mark Home as selected, Home will appear as selected without any other customizations.

Creating the selected style for the buttons on the main menu

To create the selected style for the Products button you have in fact to create the "selected" state for the buttons in the main menu (the styling will apply to any of the main buttons when they are marked as selected in the structure):

Select a button in Design view

In the inspector, we will have to handle the design, arrow and text for the selected state. Click on the Design tab, then choose the "Selected" state and make all the customizations needed to create the special selected style:

Border selected state

Make the customizations for the selected state in the arrow and text tabs as well.

Creating the selected styles for the buttons on the secondary levels

Creating the selected style for the secondary levels follow the same pattern: select any button on the secondary menus and create the selected custom settings for the design, arrow and text.

Once you are done with the settings for the selected state, you should upload the html page and the /includes folder on the testing server and press F12 to preview the menu.

Download a free trial of Flexi CSS Menus
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6