Creating Drop Down Menus

[gwpriester]

Several people have asked me if there is a way to create drop down menus in Xtreme 4.

After a bit of thought, the answer is, Sure. Why not.

Here how.

Create your Normal State buttons

For each Normal State button, create a new Layer called Dropdown, Dropdown-2, Dropdown-3, etc.

Paste separate grouped buttons on these drop down layers and add a Web Address to each. These buttons will appear as a single drop down menu with various choices.

Create a new layer, MouseOver. Copy and paste the drop down buttons to this new layer and change the appearance of the buttons.

Create a new layer, MouseDown. Copy and paste the drop down buttons to this new layer and change the appearance of the buttons.

I've attached a simple 4 page Xtreme 4 XAR document so you can see what I have done and how the buttons appear on the layers and how they are linked (in this case to new pages).

Gary

[steve.ledger]

Well done Gary. This will prove invaluable to refer to many times I'm certain.
Thanks for the effort.

[jeb]

Tks, Gary - you make it seem so simple, which I am sure it isn't, that maybe even I can do it.

Again, tks - jb

[gwpriester]

The buttons can have transparency too which over a photo or colored background gives the impression of the buttons being translucent.

[aridzone]

Thanks Gary

Your doing a great job with all the web design info.
Keep it up!

[zaphodeist]

Thanks Gary. This will mean my site will be more integrated as I won't need the Webstyle menu on an external page as it is now

[spondoolix]

Gary,
This is really useful advice.
Thank you for your time and trouble.

[gwpriester]

Ah, there is a fly in the ointment as they say.

This only works with one drop down menu. Unless I am missing something.

If I create a second drop down menu and link the normal state button to the dropdown 2 layer, the mouse overs and mouse downs do not work.

It's always something.

[covoxer]

If I create a second drop down menu and link the normal state button to the dropdown 2 layer, the mouse overs and mouse downs do not work.

It's beacause of the wrong layer order. The MouseOver and MouseDown layers should be located right on top of the pop-up layer that is supposed to use them. Also, every pop-up layer has to have separate MouseOver/NouseDown layers (which is obvious since multiple 2nd level submenues from the main menu may overlap in space so you cant use a single MouseOver for all pop-ups, in case you've tried to do this).
So, if you have multi level (tree like) menu, the layer order as appears in the layer gallery has to be (layer names used):

mousedownSubmenu3
mouseoverSubmenu3
Submenu3
mousedownSubmenu2
mouseoverSubmenu2
Submenu2
mousedownSubmenu1
mouseoverSubmenu1
Submenu1
mousedownMainMenu
mouseoverMainMenu
Main menu
mousedown
mouseover
Main page

I'ts quite simple to understand.
Here's the demo design, the one I have uploaded to this forum many times. It does illustrate this tehnique and more. You should have taken a better look to it before.

Hope it helps.

[spondoolix]

covoxer,
When it comes to web pages, you are a fountain of good and practical knowledge.
Many thanks.