Create Side Menu with Layer Genie
This tutorial will show you how to create a flyout side menu with the Layer Genie extension.
You can take a look at the results by clicking here.
Check the Demo page for results
| User Level: | Beginner |
|---|---|
| Product: | Dreamweaver MX |
| Browser: | All |
| Technologies: | DHTML, HTML |
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.
George Petrov
George Petrov is the Founder of the highly successful Zones: DMXzone.com, FWzone.net, FLzone.com, CFzone.net, DNzone.com and FlashFiles.nl
He has developed the comprehensive Dynamic Zones Content Management System that is the brains driving them and constantly supports their online communities with his extensive and valuable knowledge.
He is a renowned web development 'Guru' who has written many articles and extension for Adobe's Dreamweaver.
George Petrov is also the CEO and Founder of Dynamic Zones and also very proud of his children Sofie, Victor and Alexander!
User Reviews
Total of 3 reviewsRE: Persistent Sliding Menu
Written by Marja Ribbers-de Vroed on December 8, 2003Hi Paul, Yes, that should be possible. But you might try this with the free Slide Layer extension as well. Look for it in the 'Extensions' section here at DMXzone/ Regards, Marja
Persistent Sliding Menu
Written by Paul shadwell on December 8, 2003I would like to do something similar to this but using a menu that slides up from a persistent layer stuck to the bottom of the page. The idea is that I have a bar at the bottom of the page that acts like a frame, however, when there is new news to ...
compatibility
Written by Mark Morse on March 18, 2003Checked the demo for this tutorial and on the mac, it failed completely in NN4+, partially failed in IE 5 and worked as advertised in NN7. Interestingly enough, I couldn't post a review in NN7. Had to go back to IE5 to post the review. This stuff ...
