Dreamweaver 8 – Using the Sucker Fish Menu

Dreamweaver 8 has a new extension called the Sucker Fish Menu. The Sucker Fish Menu allows you to insert a complete navigation menu with a drop down menu. This would be ideal for sites that offer sub-categories on their site. For example, if you had a site that offered Books, Software, Movies, etc. Then you wanted to list Categories for Books, Software, Movies, etc. This would be the easiest way to do it. I think this will be a big hit with the new Dreamweaver because it is much easier to insert it in your site. In this Guide I will show you how to use the Sucker Fish Menu. So Let’s begin….

Using the Sucker Fish Menu in Dreamweaver 8

Step 1 – Open your Dreamweaver 8 program.

Step 2 – Create a New Document and Save it.

Step 3 – If you don’t see your Insert Panel at the top of your Dreamweaver window then click View > Toolbars > Insert. That will bring up your insert panel.

Step 4 – Look for the little button with the Fish on it. Click that button. The Sucker Fish Menu Dialog Box will pop up.

Step 5 – In the Text Field Type in your first main category. Type the same name in the Title Field. In the Url Field, type the url that main category will go to. Then click the Plus Sign at the top of the Dialog box.

Repeat step 5 for every main category you need. For example Books, Software, DVD’s, etc. Once you have added all your main categories go back and click on Link1 and click the minus sign to delete it. Delete all the ones that says LINK. Don’t delete the ones you created though. Move on to Step 6 once you’re finished with this.

Step 6 – Styling your Menu. Now we need to style it. Under style list items choose the colors that you want to use. See Sucker Fish Dialog Box Image to get a graphic look of my dialog box. Once you are finished click OK.

Now we need to work with the Code part. So split your design so that you see the code in the top window of your Dreamweaver program.

Step 1 – Find in the Code where it says

Books

• 
  
• Sub Menu 1
• Sub Menu 2
• Sub Menu 3
• Sub Menu 4

Yours may not say Books. Yours will list what item you put first in the dialog box.

This is your first drop down box. You need to change these Sub Menu 1

This is where you will list your sub-categories and the url for that sub-category. Since my first menu item is Books, I will list the Sub-Categories for Books. So mine would look like this.
Books

• 
  
• Horror
• Mystery
• True Crime
• Romance

If you need to add more sub-categories, simply copy
True Crime
and paste it somewhere between the

tags.
Change the /truecrime.html to your url and change the True Crime to the name of your sub-category

You will need to do this for each Main Category (Books, DVDs, etc.). It takes a little time but in my opinion it is well worth it. You can preview the menu at any time by pressing F12 on your keyboard. It may look complicated in this guide but once you do one section of code you will fly right through it. I love this new feature in Dreamweaver and I think many others will too. Have fun with your new menu!! If you get stuck, please feel free to contact me through this page at the top. See my images to get a graphic look at this menu.