Pop-Up menus

I wrote a lengthy answer to a tech support question posted
on the bulletin board. Since it is a fairly common
question I decided to include it as this weeks IMS Tip.

I'm trying to setup a menu to resemble the one used on
www.eiffel.com. I've tried just about everything but
cannot achieve a similar effect. Is this possible to do in
IMS Web Engine? Please help.  -Alex

Please excuse my obvious lack of artistic talent. I posted
an example of something similar to what you want at:

IMS Web Engine can create this type of menu. First take a
look at this article on drop menus: is4fig3.htm

There are several different ways to solve the problem. The
simplest is to use the Wizard to create a Drop menu. This
works quite well if you have a Nav Bar at the Top with
menus that drop down. Your example has the menus at the
side that pop out to the right. The problem here is how to
turn the menu off. If you group the Nav Bar Menu Object
and the Pop-Up menu list together then the mouse would
still be over the Grouped Object when you are trying to
select the next Nav Bar menu item so that you will end up
with multiple pop-up menus displayed at the same time. In
this example I solved the problem by creating my own
Behaviors. The pop-up list is to the right of the Nav Bar
and as with the wizard, the Nav Bar Object will Trigger it
on and a Mouse Leave will turn it off. Since the mouse is
not over it when it is turned on, the End Event includes a
timer and a logical AND operation. This provides enough
time for the mouse to move from the Nav Bar Object to the
pop-up menu list.

To re-create this;

1. Create a Nav Bar Text Object called "menEiffle"

2. Create a Pop-Up menu list Object called "popEiffle".
You will need to enter the links yourself. My example is:
An Eiffel is better than a waffle.
An Eiffel is better than a waffle.
An Eiffel is better than a waffle."

3. Load two gif Objects for the backgrounds. The first
will popup over "menEiffle" and the second will popup
under "popEiffle". The first should include text "Eiffel"
since it will cover "menEiffle". I also suggest you use
more talent than I did in the example. Call these
"mEfflegif" and "pEfflegif". Since pEfflegif and popEffle
occupy the same space you can move them together and
create a group Object called popEffleG.

4. Select "menEiffle". Select the Behavior button and
confirm a new behavior. Select the 'Trigger Event' dialog,
check 'Mouse Over'. Select the 'Actions' dialog, under
'When Active' check the 'Trigger Behavior' box and select
"popEiffleG" from the drop down box. this will trigger the
popup group when the mouse moves over the "menEiffle"
Object. We also need to end the Behavior so that it can be
used again. the easiest way is to simply check the 'Mouse
Leave' button in the 'End Event' dialog. Exit the Behavior

5. Select "popEiffleG" and select the Behavior button to
create a new behavior. Since it is triggered active by
"menEiffle" we do not need to give it a Trigger Event.
Select the End Event dialog. We want it to Turn Off when
the mouse leaves so check the Mouse Leave box. Since the
mouse will not be over it when it is turned on, we need to
add a delay so also check the 'At Specified Time' box and
enter a delay. This timer is in fractions of a second and
not seconds as reported so you may need to play with the
setting to get a delay that is suitable. I used 150. Since
we need both the Timer AND the mouse to End the Event,
check the 'AND all resets' button. Select the Actions
dialog. We want the Group Object to be invisible when not
active so Uncheck the "Visible" button under 'When Not
Active'. We also want to make the second menu gif Object
visible so in the 'When Active' section select 'Trigger
Object' and select the "mEiffleGif" object from the list.
Under 'When Not Active', check the 'Reset Object' button
and also select "mEffleGif" from the list.

6. Select "mEiffleGif" and create a behavior for it. Since
it is turned On and Off by the "popEiffleG" Object we only
need to uncheck the 'Visible' box under 'When not active'
in the 'Actions' dialog so that it is invisible until it
is triggered active.

7. Finally, you will probably not want these Objects to be
visible when the page is being loaded so right click on
each one, select the Options dialog and Uncheck the
Visible When Loading button.

I realize this sounds long winded but with a little
experience you should be able to set this up in less than
a minute.

In Version Two we will include a visual Nav Bar editor
that will automate this entire process.

"IMS Web Tips" ISSN 1488-7088
© Copyright 2000 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send a blank e-mail to join.imswebtips@list.imswebtips.com  or
visit the IMS Web Tips home page for subscription information and a list of past articles.


If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.

Click here for a free WYSIWYG pixel precision HTML editor.
Join the IMS Web Tips weekly newsletter
Email: Name:

Please recommend us to a friend.
Home         Archive by Date         Archive by Topic        Virtual Mechanics