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

by JAPES @ PICTURA

Adding 1st level submenus

You should now have a page that looks like this when you preview it.

Menu Magic has added nicely styled submenus to our page, so let's save some time by using these Menu Magic II submenus to create our 1st level of submenus.

Let's take a time-out to talk about the terminology I'll be using throughout this tutorial. Strictly speaking Menu Magic II creates the '1st level' of submenus, but I think that it will be easier to grasp the concepts used in this tutorial if we refer to these as the MMII submenus. Any menus we create will then be 1st level, 2nd level 3rd level and so on.

This may seem a little confusing now, but I think it will become clearer as we move on.

Creating Our 1st Level Menus

We need to create two '1st level' submenus one for 'Sublink 2.2' and one for 'Sublink 4.4'

Select Layer "p7TBsub20" from your 'Layers' panel and make a copy of it. Rename this first copy "sub2x2", this will be the menu that appears when you mouse over 'Sublink 2.2' in the MMII submenu 2.

Please Note that sub?x? is just the convention I use, please feel free to use your own, but be aware that full stops (periods) and under scores etc, should not be used.

Make another copy of Layer "p7TBsub20" and rename this second copy "sub2x4", this will be the menu that appears when you mouse over 'Sublink 2.4' in the MMII submenu 2.

Let's alter the Sublinks for each of these new layers. Let's give "sub2x2" eight Sublinks and rename them so they look like this:

Sublink 2.2.1
Sublink 2.2.2
Sublink 2.2.3
Sublink 2.2.4
Sublink 2.2.5
Sublink 2.2.6
Sublink 2.2.7
Sublink 2.2.8

Let's do the same for "sub4x4" but this time give it four Sublinks and rename them so they look like this:

Sublink 2.4.1
Sublink 2.4.2
Sublink 2.4.3
Sublink 2.4.4

Now using the 'Layers' panel, 'drag' your new submenus to the top of the layers list so that they have a higher 'z-index' value than any of the MMII submenus.

Let's now go to layer "p7TBsub20" and 'mark' Sublinks 2.2 and 2.4 in some way to show that they are now going to be 'triggers'. For this tutorial I have simply added the '>' character to the end of the 'Sublink' links twice so they look like this:

Sublink 2.2 >>
Sublink 2.4 >>

You could use any character you like, you could even use an image, if you wanted to.

Creating a 'closer' for our new 1st level submenus

Let's create a means to close our new submenus, even before we think about opening them!

The first time I created a multi-level menu using Menu Magic II as the base, I thought it was good idea to use the 'closer' layer "P7TabH" that Menu Magic II uses to close it's menu's, to also close my menu's. It is a good idea, but there is one small problem you need to be aware of.

If you add any additional behaviours to the image contained in Layer "P7TabH" and you then modify your Menu Magic menu using the 'Modify Menu Magic II command, the layer "P7TabH" would be recreated and all of the behaviours you added will be lost.

It is not a big problem to add them back again, but being lazy, I have gone for another solution. I also think this solution has some added advantages because it frees you from the need to add any additional behaviours to any of the main Menu Magic Triggers. Again if you were to modify your menu any behaviours you add the the main MMII triggers would also be lost.

Here is my solution:

Make a copy of the Layer "P7TabH" and rename it "subCloser"

Click on the 'shim' image contained in you new "subCloser" Layer and delete the "Trigger Menu Magic II" behaviour using the 'Behaviours' panel, we don't need it for our closer.

Important! 'drag' your "subCloser" layer in the 'Layers' panel so that it is between the MMII Triggers (p7TBtrigxx) and the MMII submenus (p7TBsubxx).

Your 'Layers' panel should now look something like this:

Layers panel

Save what you have done.

Next

Copyright © 2003 Pictura. All Rights Reserved.