Home > Creating your first menu > Your first static menu

Your first static menu

In this section we will create a menu using FlexiMenus JS for Dreamweaver, the Designer Edition; you will see that the menu creation process is straightforward and fast. We'll use a predefined configuration to create this menu, as FlexiMenus JS comes with a set of presets among which there is a big chance that you will find one which will apply to your needs.

Before going further, you need to install FlexiMenus JS on your computer (a free trial or a licensed version); you can find FlexiMenus JS on the Extend Studio Web site. More information about the extension installation and registering you can find in the Installation section of the documentation. You also need to have the page where you want to insert your menu as part of a Dreamweaver site, as FlexiMenus JS creates a folder where its dependent files are kept.

To insert a menu in a page, follow these steps.

  1. Open the page in which you want to work, then travel to the location where you want to insert the menu. From the Insert bar, FlexiMenus JS category, insert a drop down static menu into your page; as you do that, the FlexiMenus JS user interface opens. Read more about the FlexiMenus JS interface in the Interface layout section of the documentation.
  2. In the Appearance tab we will give the menu a name and set the menu's appearance. Type myFirstStaticMenu in the Menu Name option, and enable the two options below (Use Default Skin Dimensions and Use Default Skin Configuration) in order to preserve the skin's appearance.
  3. Switch to the Configuration tab. As you can see in the Menu Structure panel (the left-side of the interface), FlexiMenus JS starts with a default structure for the menu; for simplicity's sake, we will use this structure to create the menu. In the following sections you will find out more about menu configuration and styling.
  4. Click the Save button at the bottom of the interface to save the changes; following, click the Close button to add the menu to your page. As you can see, the menu was embedded in Design View as well as in Code View.
  5. In the File menu, click Preview in Browser and select a browser from the list or click F12 to preview the page in your default browser.