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.

How to create the menu structure for the Flexi CSS Menus

With Flexi CSS Menus extension is very easy to create an unlimited levels menu structure. Open the page and click in the area where you want the menu. From the Insert panel click on Insert Flexi CSS Menus and this will open the interface where you can define what type of menu you want to create, and the structure.

Understanding the main interface

Insert menu interface

  • 1 choose menu type - Flexi CSS Menus generates3 types of CSS menus: drop-down, vertical and tabbed
  • 2 menu name - is used in the HTML and CSS code to identify the menu
  • 3 menu width and height - you can have a predefined menu width and height or let the extension autocalculate the dimensions depending on the number of buttons and their sizes
  • 4 define menu structure - here you can define the menu structure by adding menu entries, submenus and the order of the menus. Click on the arrows to see the submenus or on the button titles to change the label, link and target of that button
  • 5 menu item details - here you can change the label, link and target for each button
  • 6 choose a menu skin - you can select and start from one of the embedded menu skins and customize it anyway you need it

Optional CSS settings available

There are 2 additional settings that you can use when creating a CSS menu: z-index and mobile support. z-index will help display the dropping parts of the menu over the other layout layers (the menu will appear above the other layout elements if you set the z-index to a higher value than the rest of the layout elements).

The menu structure interface

Menu structure details

From the menu structure section you can perform various operations on the menu structure:

  • add menu entry - adding more buttons in the menu
  • change the menu order - change the order of the buttons in the menu on each level individualy
  • mark button as selected - marking a menu entry as selected will apply the selected CSS on the button to mark the button as current page
  • increase/decrease menu level - with this feature you can select a button and transform it in a submenu or an upper level menu
  • change the label and link - on the right side you can change the label of the button (text) and the link
  • selected - the selected checkbox applies the "selected" CSS styles on the button, as described here.
  • delete button

 

Creating the menu structure

To create the menu structure you can:

  • change the labels and the position of the buttons from the default menu. To change the label of a button, click on the button name in the menu tree and on the right side, change the name in the label field. You can as well change the order of the buttons or the level of the menu by using the buttons at the bottom of structure tree.
  • add your own buttons. To add a new button, select the parent of new button and click on add menu item. This will create a new button like in the image below. You can change the label, link and position using the fields on the right and the buttons at the bottom of the tree:

Add menu item

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