Example Menu

From the article, Extending Dreamweaver: Let Dreamweaver Create Your Menus.

On the left, you can find an example menu created with our custom JavaScript object in a single click (well, actually two clicks, because you have to select a root folder first). All menu items point to empty files, which are only used for demonstration purposes.

The version we're discussing today is not configurable, so all data needed like image names or labels is being stored as constants in the JavaScript source file that creates the menu widget.

Files needed

You need the following files in the same folder you're calling the menu from. The following are used:

• close.gif, a closed folder
• open.gif, an opened folder
• folder.gif, indicates a folder
• menu.css contains the needed style sheet definitions. See below.

Creating your own menu

For instructions on how to incorporate the "tree menu widget" into your Dreamweaver copy, please refer to our JavaScript library.

Style sheets

To give the widget a "real tree" behavior, you have to include some style sheet declarations. These are responsible for giving the tree widget an indent. This version of the menu object always uses the following style classes:

• menuFile, style class for files, the example uses "margin-left:16px"
• menuFolder, style class for folders, the example uses "margin-left:15px"
• menuContainer, style class for the inner contents of a displayed folder. Not used in the example.
• menu, style class which surrounds the complete menu. Not used.

So, in order to give the tree a new look or integrate it into your site, you only have to change the CSS classes the code refers to.