Create Side Menu with Layer Genie

Step 3

We now have the menu, now we need to add items to it. Like mentioned before I used rollover images for this, offcourse you can also use links or any other object for this.

On the <img> tag of this picture we are going to add Layer Genie. But first you need to create an popup, this is an simple layer with some content, you can fill it with whatever you want to.

Here are the settings I used in Layer Genie:

Main

Select the correct layer, this is the layer you just made, the popup.
I made it member of Menu Group 2, this way the popup disapears when an other layer of the same Menu Group appears.

Display

Here you select the effect you wanna use to let the popup appear.
The effect I have choosen for the Layer Genie button is Use IE4+ Transition -> Random Bars Horizontal.

(Auto-)Hide

Here select the effect it must have if the layer will be hidden again.
I used the Reversed Display Type, this way it uses the same as set by Display.
The Auto-hide Options is the action on wich it will automaticly hide, I didn't use both of them.
The onMouseOut option will hide the layer on the mouseout event, the After Delay of: you can use to let it automaticly hide after an self set number of seconds.

The IE only tab I haven't used, but take an look at it, it let's you apply an shadow on a layer.

Step 4

The close button in the popups are made with the Hide Layer(s) Genie event. Apply the event on the image of the close button. The popup I created is member of Menu Group 2, I selected in the Main tab the All Members of Menu Group 2, this closes all layers that are member of that group. In the Hide tab you can select the effect to use.

Now you know how the menu is made, you can add as many items as you want and adjust the settings if you want to to fit it in your page.