Extending Dreamweaver: Let Dreamweaver Create Your Menus

This new object for Dreamweaver 3 or 4 can easily be incorporated into your Dreamweaver application and lets you create a complete tree-style menu widget in a single click. All you have to do is selecting a root folder in the site file window (F5 with Dreamweaver 3 and F8 with version 4), and click on the appropriate icon in the objects palette (Ctrl+F2). The complete menu is generated in a few moments and inserted at the cursor's position of the active document.

The menu presents the files under the root folder in a Windows Explorer-like structure; the menu items correspond to the file names.

This version of the menu object is fully functional, though we're going to present several configuration additions in the next part of our series.

Instructions

The Zip file contains:

• Menu.htm
• Menu.js
• a folder called Examples

Both files Menu.htm and Menu.js have to be copied into your Dreamweaver objects folder, which can be found in YOUR_DREAMWEAVER_HOME/Configuration/Objects/. If you're using Dreamweaver 4, you should use the Folder Special inside the objects folder (Dreamweaver 3 users can simply create a new folder with this name or use one the existing ones).

After copying the files into the folder, you have to tell Dreamweaver to reload its configuration by opening the objects palette (Ctrl+F2), clicking on the small triangle in the upper right while holding the Ctrl Key. You'll find a new entry at the end of the list, called "Reload Extensions". Selecting this menu item causes Dreamweaver to reload its configuration.

In the examples folder you'll find a running demo of the menu widget, opening index.html will display the menu and some more explanantion about the files and style sheets needed.

The look of the menu widget is fully customizable using CSS (see the example page).

Be sure to check out the article accompanying this script, Extending Dreamweaver: Let Dreamweaver Create Your Menus.