Home > Creating your first menu > Configure your menu

Configure your menu

What we'll do in this section is take the menu we created in the preceeding section, Your first static menu, and configure the menu items inside using the Configuration section found in right-side of the interface (for each menu item).

In order to fully be able to use the information in this section, you should first go through the Your first static menu section, as we'll pick up the work from the end of that section.

Note: This procedure doesn't fully apply to the Developer Edition of FlexiMenus JS. For static menus, each menu item can have an individual configuration as it can be selected in the Menu Structure panel; for dynamic menus, the configuration options are the same, only that menu items from the same category (submenus, buttons, captions or separators) can have only the same configuration.

  1. Open the .html file you created in the Your first static menu section.
  2. Switch to the Configuration section, the Menu Structure panel and select the top-level menu labeled Main Menu. Select the Menu tab from the right-side of the interface, and switch to the Configuration section. Set the Show Submenu On to Click and enable the Use Spacer option; select an Effect and an Effect Duration for the menu.
  3. Switch to the Button tab, the Configuration section; leave the dimensioning options unchanged. Select an Effect, set an Effect Duration and enable the Use Reversed Effect option (so that, when the visitor leaves the button area, it goes back to the Up state with the reversed effect applied).
  4. Switch to the Caption tab, the Configuration section; set the dimensioning options to Fit To Content.
  5. Switch to the Separator tab, the Configuration section. Change the Width and Height options and set the Separator Align to something.
  6. 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. 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.