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 for Dreamweaver

 

1. Flexi CSS Menus requirements

Flexi CSS Layouts requires an internet connection to activate and works on:
Dreamweaver CS3 Dreamweaver CS4 Dreamweaver CS5

2. Downloading the Flexi CSS Menus Demo version

Flexi CSS Menus is very easy to install on both Mac and PC. The Demo version can be downloaded from our site from the product pages. Click on the "Free trial" button as shown in the screenshot below:

Site pages

If you have purchased a Flexi CSS Menus license, you should download your commercial version from your control panel on our site. Click on Login in the upper section of the site:

Login

and fill in your account details to login.

Note: the system will create an account based on the email you used when purchasing. If you used a Paypal email account, then the license will be added to an account where you need to login with the Paypal email address.

Login form

 

3. Installing Flexi CSS Menus (PC & MAC)

Flexi CSS Menus is a Dreamweaver extension and therefore needs to be installed via the Adobe Extension Manager. To install on a PC or Mac, you need to unzip the file you have downloaded, and double-click on the .MXP file included in the ZIP.

Unzip
Unzip

Once you clicked on the .mxp file, the Adobe Extension Manager should open and the installation should begin. When done, the extension should appear in the list of extensions and be enabled.

Adobe Extension Manager
Adobe Extension Manager

Note: if you have previously installed the demo version and you want to switch to the commercial version, un-install the demo version from the Adobe Extension Manager prior to the installation of the commercial version.

4. Locating the easy to use interfaces

To use and customize a css menu with the Flexi CSS Menus extension, you need to open the Insert Panel (press CTRL + F2 to enable it) and search for Flexi CSS Menus. The extension is located together with the other Extend Studio products:

If the Insert Window is displayed as Tabs below the main Dreamweaver menu

The Extend products should appear on the right side of the Tabs:

Tabbed Insert window
Tabbed Insert window

If the Insert Window is displayed as Floating Panel

Locate the Insert floating panel (should be on the left or right of the working area, depending on the Workspace settings: developer, designer etc)

Click on the "Common" drop-down - marked with a down arrow:

Insert panel
"Common" down arrow

The Extend Studio products should appear in the pop-up list.

Insert panel

5. Basic usage of the Flexi CSS Menus extension

Create a new html file in a site and save it; locate the extension menu as described above. Click on the Insert Flexi CSS Menus:

Insert Menu
Insert the menu

This will open the Flexi CSS Menus interface where you can create the structure for the menu and choose a look&feel template which you can customize later.

Uploading on the server

The Flexi CSS Menus creates the HTML and CSS file for the menus. The external CSS file is saved in a folder called "includes". Once you're done with editing the layout, upload the "includes" folder on the server.

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