Menu Magic II Multi-Level Submenu Tutorial (5 of 5)
Tracing the users route down the submenu structure
You should now be able to go away and with a little practice have submenus popping up all over the place, but let's try and improve a little on what we have got so far.
Please note that this next step is optional.
Wouldn't it be nice if the user could see the route they had taken, hi-lighted on each submenu?
Have another look at our finished menu and you'll see what I mean. As we move from menu to menu the 'trigger' that opens the next level of submenu remains hi-lighted as we move to to the submenu it has just opened, very cool!
We can do this quite easily using PVII's MultiClass 2 Extension.
First of all add the following rules to your "d_bonusv5.css" Style Sheet:
.traceon {
color: #6666CC;
background-color: #EEEEEE! important;
}
.traceoff {
color: transparent;
background-color: transparent;
}
Lets add the MultiClass 2 behaviour
We need to start by giving each 'trigger' Sublink an id.
Find Layer "p7TBsub20" in your code view and add the id "link2x2" to the <a> tag so the code looks something like this:
<p><a id="link2x2" href="#" onMouseOver="P7_autoLayers(0,'sub2x2','subCloser');P7_alignLL2('sub2x2','p7TBsub20','E',20,-10)">Sublink 2.2 >></a></p>
Please note that your code may not 'wrap' like this, that is normal.
Repeat this process for each of your 'Trigger' links remembering to substitute the id name for something suitable each time, for example:
"link2x2"
"link2x6"
"link2x2x3"
"link2x2x6"
Once you have added all of your required id's it is time to apply the behaviour.
Select Layer "p7TBsub20" so it displays in your design view, select Sublink 2.2 and apply the Multiclass 2 behaviour.
When the MultiClass 2 dialogue box appears, input the following settings:
Object Id select "link2x2"
Class Name select "traceon"
Click OK and make sure the event is set to onMouseOut.
Repeat this process for all of your other Sublink Triggers, making sure to select the correct Object Id each time.
You should now have a series of triggers (Sublinks) that change style once you move off them, but don't return to their default state when they should. Lets correct that now.
First of all select the 'shim' image in our "subCloser" Layer and apply the MultiClass 2 behaviour to it.
When the MultiClass 2 dialogue box appears, input the following settings so it looks like this:
You will need to use the 'Add Item' button to input the settings for each Object Id, Also notice that this time all of the Class Names are set to "traceoff"
Click OK and make sure the event is set to onMouseOver.
This forces our triggers to return to their default state as soon as you move your mouse off the menu.
We are nearly there now!
This is one small problem left, if a user were to navigate down the menu structure and then navigate back up again any triggers that have been set to 'traceon' would remain in this state.
To fix this we have to apply the MultiClass 2 behaviour to every Layer that contains a Sublink 'Trigger' in our case this means "p7TBsub20" and "sub2x2".
It is important that you apply the MultiClass 2 behaviour to the Layer and not the sublinks contained in the layer.
If you find that the MultiClass 2 option is greyed out when to try to apply it to a layer, you need to make sure that your 'Behaviours' panel is set to show events for IE5 and above. To do this, click the + sign in your 'Behaviours' panel and you should see the option to 'Set Events For'.
In the same way that we had to apply AutoLayers 'down the line' to each submenu level, we have to do a similar thing with MultiClass 2.
For "p7TBsub20" you need to set the Class Name to traceoff for any Trigger Id in "p7TBsub20" and for any Triggers Id's 'below' this level. In this case that includes "sub2x2" Therefore for layer "p7TBsub20" we need to set the Class Name to "traceoff" for the following Id Objects:
link2x2
link2x4
link2x2x3
link2x2x6
Click OK and make sure the event is set to onMouseOver.
Because there are no Triggers below the level of "sub2x2" when it comes to applying the MultiClass 2 behaviour to layer "sub2x2" we only need to include the Id Objects contained in that layer, In this case:
link2x2x3
link2x2x6
Click OK and make sure the event is set to onMouseOver.
If all has gone to plan your menu should look like this, and we're finished.
I hope you found this tutorial useful!
Japes
- 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.