How to configure multiple menu items using the Level Structure panel

Summary

Usually, as the pages on a Web site increase in number, so does the menu used to navigate through the Web site. As the menu items situated in the same submenu or the submenus at the same level have the tendency to have the same appearance, FlexiMenus JS brings in a new concept of menu configuration, the Level Structure panel.

In this tutorial we will illustrate how you can configure multiple menu items using the Level Structure panel. First of all, we will configure the buttons in the main menu; following, we'll configure the buttons in both the submenus at once.

Before you start doing the tutorial, there are a few things you'll need:

  1. Adobe Dreamweaver with FlexiMenus JS installed.
  2. A Dreamweaver site; if you need more information, read the tutorial on How to create a Dreamweaver site.
  3. Extract the following archive and copy the .html file in the local root folder of your Dreamweaver site.

Step 1: Insert a drop-down menu in the Menu.html page

Open Menu.html and place the mouse cursor in the div where the menu will be placed; select the text inside - Insert a drop-down menu here - to add the menu instead.

From the Insert bar, the FlexiMenus JS category, select Insert DropDown Static Menu to add a static drop-down menu to the page; if you do not see the Insert bar, click Window, Insert in the Dreamweaver top menu, or use the keyboard shortcut Ctrl + F2.

Step 2: Configure the options in the Start tab

As you insert the menu in the page, the user interface opens in its default view, with the Start tab selected. Insert ConfigureMultipleMenuItems in the Menu Name option and enable the Fit Width To Content and Fit Height To Content in order to set the menu dimensions to fit the menu content. Select the XXX skin and XXX style from the Select Skin and Select Skin Style lists.

Step 3: Configure all the buttons in the main menu

Switch to the Config tab. In this step we will configure all the buttons in the main menu, at once. First of all, to see what we configure, click the Expand Tree button in the Menu Structure panel. In order to highlight the buttons in the main menu for further configuration, do the following:

  1. Select root in the Menu Structure panel.
  2. Select Level 0 in the Level Structure panel.
  3. Select the Button tab.

As a result all the buttons in the main menu will appear highlighted, which means that changes in the Configuration or Style sections will affect all of them.

If it's not already opened, click the Button Configuration section to expand it. You can modify any options you want and when you preview your menu you will see that the changes affected all the buttons in the main menu. For the brevity of the tutorial, we will leave the Configuration options with their default values and modify only style-related options, as they are the most visible when you preview the menu.

Click the Button Style section to expand it. Again, we'll leave the Button Layout section unchanged and modify the Text Properties. Apply the following changes to the Color options for the buttons states: XXX for the Up State, XXX for the Hover State and XXX for the Down State.

Step 4: Configure all the first-level submenus

In this step will configure the first-level submenus. With root selected in the Menu Structure panel, switch to Level 1 in the Level Structure panel and select the Menu tab.

Step 5: Configure all the buttons in the first-level submenus

In order to configure the buttons in the first-level submenus, select the Button tab while keeping root selected in the Menu Structure panel and Level 1 in the Level Structure panel.

Conclusion

In the Dreamweaver top menu, click File, Preview in Browser and select the browser in which you want to preview your page, or use the keyboard shortcut F12 to preview the Menu.html page in the browser set as default. As you can see, the menu looks as expected, with uniform appearances for the groups of items you configured.