PVII Pop Menu Magic

User Guide Home :

Using Auto Generate - Complete Menu

This tutorial will demonstrate how to use the Auto Generate system to build a complete menu based on your site's folders and files - in just a few clicks. The tutorial will use an example folder structure loosely based on projectseven.com. You can follow along using your own site or you can download the Example Site. If you choose to download the example site, unzip the archive and define a new Dreamweaver site using the example site as the site root.

Prepare the Menu Insertion Point

-Open the index.htm page (or your page). Our example page contains placeholder text, "Navigation". This is where the menu will be placed.

-Click on the placeholder text, "Navigation", and then click on the <p> in the Tag Selector bar along the bottom left edge of the Dreamweaver window. This selects the entire paragraph.

Selecting the <p> tag

-Click your Delete (Del) key to remove the placeholder text.

 

Now we have a clean insertion point for the menu.

Open the PVII Pop Menu Magic interface

-Click the Pop Menu Magic by PVII icon in the Common category of the Insert Toolbar.

The PopMenu Magic toolbar icon

Alternatively, you can use the main Dreamweaver menu by choosing Insert > Studio VII > Pop Menu Magic by PVII. Or Modify > Studio VII > Modify Pop Menu Magic by PVII... if you already have an existing Pop Menu on your page.

-The PVII Pop Menu Magic interface will open.

Open the Auto Generate Interface

Since you are going to Auto Generate the complete menu system, it does not matter which item is currently selected in the Pop Menu Magic interface. The existing menu will be completely replaced with the generated menu.

Click the Complete Menu button

-Click the Complete Menu button to open the Auto Generate interface.

The Auto Generate interface

 

Auto Generate Options

The Auto Generate interface will open with all of the user options pre-supplied. For this example you do not need to change any of the options - but we'll discuss each in detail for future reference.

Any changes you make to the options in the interface are automatically saved and will be used as the defaults the next time the Auto Generate system is used. This allows you to specify your root file and various filters only once. They will be recalled each time you use the system.

Root Folder

This box specifies the location of the folder within your site that will serve as the starting point for the automatic menu creation. All of the files and folders within this "root" folder will become part of the generated menu - subject to the various exclusions and filters that you specify in the other entry boxes. To assure that the system will always build a menu system with valid links, the root folder must be a folder within your defined Dreamweaver site.

The Browse Button

Use the Browse button to navigate to the root folder that you wish to use. The Select PVII PopMenu Root Folder dialog will open. Navigate to the root folder you wish to use and click the Select button to close the dialog. The new root folder path will now show in the Root Folder box.

Include File Types

The include File Types box contains a comma-separated list of the file types the menu generator should include in the completed menu. The system default lists only .htm and .html files. Add any file type you wish to include in the menu by appending this list. Separate each new file type with a comma. For example, if you want to include .asp and .cfm pages, then edit the list so that it looks like this:

htm,html,asp,cfm

The file type list is not case-sensitive. Your file extensions can be a mix of lower and upper case characters.

Note: Be sure that you DO NOT include the period (.) when adding file types.

Exclude Folders

The Exclude Folders box contains a comma-separated list of folders that will not be used to generate the menu. The menu generator will bypass (ignore) any folder that you list in this box. The default list contains folders that normally should be bypassed. Add any folder names that you wish to bypass by appending the list - separating each new entry with a comma. For example, if you wish to exclude a folder named "testing", then add a comma followed by the folder name to the end of the existing Exclude Folders entry so that it looks like this:

images,scripts,Templates,Library,Local_Files,assets,p7tm,p7pm,testing

Capitalize First letter

Check this option if you want the system to automatically capitalize the first letter of each word for every folder and file name.

Convert Underlines to Spaces

Check this box if you want the system to automatically strip out underlined (underscored) characters from your file and folder names.

Note: The system will ignore all folder and file names that begin with an underline character even if you choose the Convert Underlines to Spaces option.

Generate The Menu

-Click the Generate button to build the menu.

Clikc the Generate Button

The system will look through all of the folders and files that are within the root folder, filter them based on the options chosen, and produce a complete menu. The Auto Generate interface will close and the new menu will appear in the Pop Menu Magic interface.

The newly generated menu

The system generated one root menu section link for each of the folders. Then it generated menu item links for each of the files within those folders. All links are alphabetized just as they are in your computer's file system. Root links and sub-menu levels are structured just as they are in your file system.

-Click the plus sign (+) to the left of the Products link to expand the menu section.

The expanded Products menu section

The system has created a sub-menu level corresponding to each folder with subordinate menu items corresponding to each file inside the folder.

You could save the menu at this point and it will work perfectly - but before we save, let's adjust the menu link order.

Finishing Touches - Changing Link Order

The Books menu section is listed first, because the folder structure is alphabetized, and the Index link is listed third. We'll move the Index link up to the top, then move the Books link down to the bottom.

-Select the Index menu item.

-Click the Grab button, (which activates the Drop button).

-Select the Books menu item.

-Click the Drop button.

The Index menu item is now listed below the Books menu item.

Index item moved beneath Books

Now we'll move the Books link to the bottom of the menu.

-Select the Books menu item.

-Click the Grab button.

-Select the Tutorials menu item.

-Click the Drop button.

The Books menu item is now listed at the end of the menu.

Books menu itme moved to end of menu

Now we'll change the name of the Index menu item to Home.

-Select the Index menu item.

-In the LinkText box, change Index to Home.

Chnage the text of the Index menu item

-Press your Tab key to process the entry.

The finished menu listing

In Conclusion

The system created a fully functional Pop Menu Magic menu from our file system, re-ordered the menu items to our liking, and modified the link text for the Home button. If you're working along with our example site, then be sure to select the Golden Sands menu style before saving - it will look perfect!

-Click the OK button to add the new menu to your page.

Click the Save button

-You can now preview and test the menu (F12).

Finished menu Browser Preview

Next: Home