Part 6.1: How to Add the Menu to Your Side Bar
1. Start up Dreamweaver and load your home page.
2: Delete the existing placeholder content in your left column. At the top of your sidebar, you should see the words “sidebar1 Content” in bold print. Place the cursor in between the words and click the “<h3>” tag. This will select the “sidebar1 Content”, and the enclosing tag (“<h3>”) in the underlying code. Press the DEL key. All other dummy text should also be deleted by highlighting various paragraphs and using the DEL key to erase them.
3. Click “Insert > Spry > Spry Menu Bar” from the menu.
4. A dialog box, entitled “Spry Menu Bar”, will appear. Select the “Vertical” item and click “OK”.
5. A default menu bar appears into your site column with some dummy content. The menu has four items. Items 2 & 4 have normal menu items, and 1 & 3 have sub-menus.
Take a look at the PROPERTIES panel at the bottom of your window (pictured below)
There are 3 list boxes displayed. The first box contains “Item 1″, “Item 2″, “Item 3″ and “Item 4″. “Item 1″ is currently highlighted and the box next to this displays the submenus, namely, ‘’item 1.1’’, ‘’Item 1.2’’ and so on. This would also be the case if ‘’Item 3’’ was selected. If you click ‘’item 1.1’’ or ‘’Item 3.1’’ you will see that the 3rd list box contains Two Items: ‘’Item 1.1.1 or 3.1.1’’
In your main Dreamweaver window, you will see that Dreamweaver has expanded the button menu to show the first level submenu. This gives you an idea of how your menus appear visually on your web page.
You can configure a menu system of up to 3 levels deep, but this tutorial will only be using a one-level menu system.
6. Click “Item 1″ in the first list box. This is usually a link to the websites home page in a navigation bar. Submenus are not needed for this, so they need to be deleted. To do this, click “Item 1.1″ in the second list box. If you click the minus (“-”) sign, this will delete the item highlighted, and the plus (“+”) sign will add a new one. We will need to click the minus sign, and continue doing so to remove items 1.2 and 1.3.
7. If you look to the right of the 3 list boxes, there are a few fields:
- The “Text” field
- The “Link” field
In the Text field, replace “Item 1″ with the words “Home”.
In the Link field replace the hash (“#”) mark with your website’s address (URL).
8. In the Text field replace the words “Text” in “Item 2″ to “Feedback Form”,”Feedback”, “Contact Us”, “Contact Form”, “Support” or any other words that are appropriate.
In the “Link” field, the hash (“#”) mark needs to be replaced with “feedback.html”
9. Click “Item 3″. Click “Item 3.1″ and then the minus (“-”) sign above. A dialog box will appear saying “This menu and all its children will be deleted. Would you like to proceed?” Click “OK”.
Continue removing the other sub menus, 3.2 & 3.3.
In the Text field “Item 3″ replace with the words “About Us”, and the “#” in the “Link” field with “aboutus.html”.
10. Replace “Item 4″ with “Site Map” and make it point to “sitemap.html”.
11. You may have noticed that depending on how you set the background colour, the left column may end midway in the window. This can be dealt with by adding blank lines after your menu bar by hitting the ENTER key.
12. Click “File > Save”. A dialog box called “Copy Dependent Files” will appear, click “OK”. Dreamweaver will then create a new folder (“SpryAssets”) in your website’s directory that contains the support code for the menu.
