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

by JAPES @ PICTURA

Adding the AutoLayers behaviour for our 1st level submenus

Before we go any further, let's make a small modification to the d_bonusv5.css Style Sheet that Menu Magic creates. Find the following rule:

.p7tbsub {
font-size: 80% !important;
border-top: 0px !important;
}

and edit it so it looks like this:

.p7tbsub {
font-size: 80% !important;
/*border-top: 0px !important;*/
}

This is a very quick, but very dirty method of putting the 'tops' back on our submenus. There are better ways to do this but they are beyond the scope of this tutorial.

Let's continue.....

Select Layer "p7TBsub20" in your Layer Panel. Layer "p7TBsub20" should now be visible in Dreamweaver's design view. Select 'Sublink 2.2' and apply PVII's AutoLayers Behaviour.

When the AutoLayers dialogue box appears, select Layer "sub2x2" and click the 'Show Layer' button. Now select Layer "subCloser" and click the 'Show Layer' button again.

Leave the 'Set to Use' option set at 'Set One'.

Click OK and make sure the event is set to onMouseOver.

If you preview you page now you should now see Layer "sub2x2" appear on top of the MMII submenu when you mouse over 'Sublink 2.2'.

We need to move Layer "sub2x2" to make our menu usable. The simple way to do it is just to select layer "sub2x2" in design view and drag it or use the cursor keys to move it to a new location. If you are happy with that solution, go ahead and move "sub2x2" to your required location now, if you would like a little more control over the position of your submenus and an added advantage, please read on to find out how I have positioned my submenus.

Using Layout Designer 2 to position our submenus

Select Layer "p7TBsub20" in your 'Layers' Panel again so that it displays in Dreamweaver's design view. Select Sublink 2.2 again and apply PVII's Layout Designer 2 behaviour to it.

Use the settings from the image below

Layer Designer 2

Click OK and make sure the event is set to onMouseOver.

Preview your page again and you should see that the menu is positioned nicely in relation to the Sublink 'Trigger'.

I said that using Layer Designer 2 had an added advantage. Here it is, if you were ever to 'tweak' the position of any of your MMII submenus all of your submenus will 'follow' their parent menu to it's new position.

We now need to repeat each of the steps above for 'Sublink 2.4'.

Select Layer "p7TBsub20" in your Layer Panel. Layer "p7TBsub20" should now be visible in Dreamweaver's design view. Select 'Sublink 2.4' and apply PVII's AutoLayers Behaviour.

When the AutoLayers dialogue box appears, select Layer "sub2x4" and click the 'Show Layer' button. Now select Layer "subCloser" and click the 'Show Layer' button again.

Leave the 'Set to Use' option set at 'Set One'

Click OK and make sure the event is set to onMouseOver.

With Layer "p7TBsub20" still selected, select Sublink 2.4 and apply PVII's Layout Designer 2 behaviour to it.

This time use the following settings:

'Align this Layer' = layer "sub2x4"

'To Target Layer' = layer "p7TBsub20"

'Align Method' = E

'Offsets' (px) = Vertical 60 & Horizontal -10

Click OK an make sure the event is set to onMouseOver.

Preview your page again and you should see that the menu is positioned nicely in relation to the Sublink 'Trigger'.

Making our submenus disappear

Select the 'shim' image in you "subCloser" Layer and apply the AutoLayers behaviour to it. When the dialogue box appears do not select any layers to show.

Leave the 'Set to Use' option set at 'Set One'.

Click OK and make sure the event is set to onMouseOver.

If you preview your page now, you will see that when you move off your 1st level submenus that they disappear.

There is still one small problem, move over 'Sublink 2.2' and then over submenu 'sub2x2'. Now move back over to the MMII submenu "p7TBsub20" over 'Sublink 2.3' or 'Sublink 2.5', and you'll see that Submenu 'sub2x2 does not disappear, let's fix that now.

Select Layer "p7TBsub20" in your Layer Panel. Layer "p7TBsub20" should now be visible in Dreamweaver's design view. Select 'Sublink 2.1' and apply PVII's AutoLayers Behaviour.

When the AutoLayers dialogue box appears, do not select any layers to show.

Leave the 'Set to Use' option set at 'Set One'.

Click OK and make sure the event is set to onMouseOver.

Do the same thing for 'Sublink 2.3' & 'Sublink 2.5'.

Preview your page again, it should now work as required.

Save what you have done.

Next

Copyright © 2003 Pictura. All Rights Reserved.