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

by JAPES @ PICTURA

Adding More Levels and More AutoLayer Behaviours

You can add as many more submenus as your require using the method outlined on the previous pages.

Use the methods you have learnt so far to create two additional 'Level 2' submenus

Let's Call these menus "sub2x2x3" and "sub2x2x6" respectively.

If you want your menu to look exactly like mine then give "sub2x2x3" five Sublinks and name them as follows:

Sublink 2.2.3.1
Sublink 2.2.3.2
Sublink 2.2.3.3
Sublink 2.2.3.4
Sublink 2.2.3.5

give "sub2x2x6" four Sublinks and name them as follows:

Sublink 2.2.6.1
Sublink 2.2.6.2
Sublink 2.2.6.3
Sublink 2.2.6.4

Drag these new Layers up to the top of the Layers panel list so it now looks like this:

Use PVII's Layout Designer 2 to position these new level 2 submenus, remember to select the correct 'Target Layer'. Choose your alignment method and set the vertical and horizontal offsets so that your submenus appear where you want them, this may involve a little trial and error. When you are done, click OK and make sure the event is set to onMouseOver.

In most cases you will probably set the 'Align Method' to 'E', but there may be times when you want your 'new' submenu to open to the left of it's 'parent' menu. This would be useful if there was a risk of your submenu 'stretching' beyond your targetted browser width.

Don't forget to 'mark' Sublink 2.2.3 and Sublink 2.2.6 using the '>' character, or your preferred method, to show that they are 'Triggers'

Adding the AutoLayers Behaviour For Our 2nd Level submenus

You do this in exactly the same way as we did before except for a couple of differences.

Difference #1

You don't need to show the "subCloser" layer when using AutoLayers for our 'level 2' submenus, our 'Level 1' menus have already done this.

Difference #2

When you apply the AutoLayers behaviour for 'Level 2' submenus you need to set the 'Set to Use' option to 'Set Two'

To clarify:

Use set One for Level One submenus
Use set Two for Level Two submenus
Use set Three for Level Three submenus and so on, if you really need to add more levels!

Closing level 2 Submenus

You need to add another AutoLayer Behaviour to the 'shim' image in your "subCloser" Layer Do not select any layers to show.

Set the 'Set to Use' option to 'Set Two'

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

You also need to apply the AutoLayers behaviour to each of the Sublinks in "sub2x2" that is not a 'Trigger', for example:

Sublink 2.2.1
Sublink 2.2.2
Sublink 2.2.4
Sublink 2.2.5
Sublink 2.2.7
Sublink 2.2.8

Do not select any layers to show.

Set the 'Set to Use' option to 'Set Two'.

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

Even more AutoLayers!

If you preview your page, on first inspection it might look like it is working correctly, but there will be a problem if someone works their way down the menu structure and then works their way back up again without moving their cursor over our closer layer. Once they get back to the MMII submenu, all menu's will disappear except for our 'Level 2' menu's.

To correct this we need to add the AutoLayers behaviour to hide Level 2 menus using the 'Set Two' option.

These Autolayer behaviours need to be added to all of the Sublinks in Layer "p7TBsub20" including the two existing 'Triggers'.

Just to clarify, lets consider the following scenario. If we added four levels of submenus to a MMII menu, that would make five levels in all, including the MMII submenu. In this case we would need to apply the AutoLayers behaviour in the following manner.

MMII submenus need Autolayers applying for Set 01, Set 02, Set 03, & Set 04
Level 1 submenus need Autolayers applying for Set 02, Set 03, & Set 04
Level 2 submenus need Autolayers applying for Set 03, & Set 04
Level 3 submenus need Autolayers applying for Set 04
Level 4 submenus need no Autolayers applying
subCloser needs Autolayers applying for Set 01, Set 02, Set 03, & Set 04

It helps, at this point, to get familiar with your code view, it is far quicker to cut & paste the AutoLayers Behaviour to each Sublink than it is to use the AutoLayers Dialogue Box!

Preview your page, if you've got all of your AutoLayer sorted, it should look like this.

Save what you have done.

Next

• Introduction
• Adding 1st level submenus
• Adding the AutoLayers behaviour for our 1st level Submenus
• Adding More Levels and More AutoLayer Behaviours
• Tracing the users route down the submenus structure

Copyright © 2003 Pictura. All Rights Reserved.