How to manage your menu across the Web site

Summary

An unpleasant issue which appears when creating a Web site, is to keep your menu updated on all the pages when a change - such as adding a button - appears.

FlexiMenus JS makes your job easier through two features: after you create your menu on a page you can select it from a list and add it in as many pages as you want and, when you make a change on one page, you can update the menu on all the other pages where it exists.

In this tutorial we'll reproduce this problem (of course, at a smaller scale, by using only two .html pages) in order for you to see how simple managing your menu across the Web site really is. At the end of the tutorial we'll see that the changes made in the menu on open page are updated on the other page where the menu exists as well.

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 two .html files in the local root folder of your Dreamweaver site.

Step 1: Insert a drop-down menu in the Home page

Open Home.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. As you do this, the FlexiMenus JS interface opens; in the Start tab, insert ManageMenuInSite as the Menu Name. Enable the Fit To Container Width and Fit To Container Height options to make the menu use all the available space in the div which contains it. Select the XXX skin and XXX style from the Select Skin and Select Skin Style lists.

Switch to the Config tab, the Menu Structure panel. Select the Products button and use the Delete button to erase it; do the same for the Contact button.

Switch to the Save tab and select Apply Changes To This Page.

Step 2: Insert the existing menu in the Contact page

Open Contact.html and place the menu cursor in the div where the menu will be, as we did in the previous step. From the Insert bar, the FlexiMenus JS category, select Insert Existing Menu; in the dialog box which appears, select ManageMenuInSite in the Insert Existing Menu list. As you do this, the menu is added to the page, but the interface doesn't open this time.

Step 3: Add a menu item and update the menu on all pages

Select the menu and click Edit Static Menu in the Insert bar, FlexiMenus JS category. As the interface opens, you will see that the Start tab kept the configuration done in the first step. Switch to the Config tab, and select the root item in the Menu Structure panel; click the New Button option to insert a button at the end of the menu tree. Double-click the default label of the button just added and type Contact.

Switch to the Save tab and select Apply Changes To All Pages. At this point the menu in the Home.html page should have been updated as well, but we will check that in the next step.

Conclusion

Open the Home.html page. 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 page in the browser set as default. Do the same for the Contact.html page. As you can see, the changes were updated in both your pages.