Menu Magic II Multi-Level Submenu Tutorial (1 of 5)

by JAPES @ PICTURA

Introduction

Menu Magic II by Project Seven is probably the coolest menu creation tool there is for Dreamweaver. While PVII chose to provide a single submenu level, they have some free tools that can help you "extend" your menu to new levels should the need arise. The following tutorial aims to show you how easy adding additional levels of submenus really is!

One word of caution, while it might seem like a good idea to have all of your links accessible with one click from your index/home page, multi-level menus are often confusing to the end user, so please use them only when you have no other options, or if your client insists on them ;-)

Before we get started you will need the following 'Extensions' installed on your machine:

Menu Magic II by PVII
AutoLayers by PVII
Layout Designer 2 by PVII (optional)
Multi-Class 2 by PVII (optional)

All of the above extensions can be downloaded here

This tutorial assumes that you have a good working knowledge of Dreamweaver and that you are comfortable working in Design view and Code view.

Let's begin

Let's start by looking at the finished menu (The second menu has been tweaked to include 3 submenu levels).

You need to define a site were you can create your Multi-level menu.

Create a new page and correct the doctype at the top of your HTML file by locating the following section of code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and editing it so it looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

We are now ready to add our MMII menu to the page. For this tutorial set MMII up using the settings in the image below.

Once you have entered your settings, click OK to insert your MMII menu onto the page.

Although I have chosen to use a 'dropdown' menu for this tutorial, the techniques used could easily be applied to a 'fly-out' type menu.

Save what you have done.