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.

Using Flexi CSS Menus with Dreamweaver templates

When working with Dreamweaver templates there are 2 usage cases: you want to create an identical menu on all the pages made from that template or you need to have the current page marked as active (selected).

Creating an identical CSS menu in all pages generated from the dwt template file

If you don't need to have any changes done in the menu for each generated page, you can include the Flexi CSS Menus in the DWT file. All the changes done to the menus in the DWT file will propagate in all the pages created from that template. Let's see how this is done.

Create a new template file in Dreamweaver (if you don't have one created already)

From the upper Dreamweaver menu select File/New. From the pop-up select Blank template/HTML template and choose the template you need:

New template

For this tutorial I have selected the 3 column fixed, header and footer. This is how the page looks like and we're going to replace the very simple menu in the right column with the Flexi CSS Menus (don't forget to save the DWT file):

Page layout

The next step is to select and delete the menu - if you look in code view, this is the menu code:

Select and delete the menu

Inserting the Flexi CSS Menus in the

With the cursor where the previous menu was, go to the Insert Panel in Dreamweaver and click on Insert Flexi CSS Menus; you should insert a vertical menu with a width of 180px (notice the right column from this template has 180px). You can select any of the menu skins from the gallery:

180px wide Vertical menu

You can do any customizations to the menu by selecting the menu container, buttons or submenus as described in the documentation.

Creating multiple pages from the Dreamweaver template

Creating pages from the Dreamweaver template it's very easy. From the upper Dreamweaver menu select File/New. From the pop-up select Page from Template and the template you just created. This will create pages with the Flexi CSS Menus inserted and all the changes done to the menu in the DWT file will appear in all pages created from that template.

Creating Flexi CSS Menus that are different from page to page

To have a menu that is different from page to page you have to create an editable region in the place of the old menu. After having deleted the old menu (see the steps above), insert an editable region (go to Insert/Template Objects in the upper Dreamweaver menu):

Insert editable region

Click between the editable region tags and insert a Flexi CSS Menus, for example:

<!-- TemplateBeginEditable name="EditRegion3" -->click here and insert a menu<!-- TemplateEndEditable -->

The menus can be different in 3 major ways:

  • the current page is selected as active in the menu
  • the menu structure is different from page to page
  • the look&feel of the menus is different from page to page

Mark the current page as active in the menu

As the menu is inserted in an editable region, you can edit it in the new page and mark the button as active, depending on the page. To do this, select the menu in the page and from the Insert Panel in Dreamweaver click on Edit Flexi CSS Menus and mark the button as active (read more about marking a button as active here).

The menu structure is different from page to page

If the menu structure is different on a page, you can safely edit the menu structure in that page without affecting the menus in the rest of the pages. To edit the menu structure in a page, select the menu in the page and from the Insert Panel in Dreamweaver click on Edit Flexi CSS Menus. From the new interface you can change the menu structure as described in this tutorial.

The look&feel of the menu is different from page to page

If you need to have a different styling for a menu in a page, you should NOT edit the menu in the page. As the menus have an external CSS file, if you change the styling of a menu in a page, the CSS file will be changed so all the menus created with that CSS file will be changed. You have 2 options: delete the menu in the page where it needs to look differently and create a new one (this should work as the menu is inserted in an editable area) or save the current menu as a custom skin and create a new menu in that page starting from the saved skin.

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