Flyout Menu with GoLive Actions



Got Code?
Me either. Let's do it the GL6 way.
Making a flyout-menu in GL6 without a stitch of code.
(but perhaps some mouse fatigue) ;)~




Step One - Rollover Images


First we want to take advantage of a great GL6 time saving feature for rollover images.
To do so, name your images like this:
First image - 'imagename.jpg'
Second image - 'imagename_over.jpg'.
Essentially, keep the names the exact same but add '_over' to the over image.
See Example:



Next, after you get your page set up, select an image that has a rollover state.
Then go to the Inspector pallet and select the Rollover tab.
Click on the flyout menu arrow in the top right corner, and select Detect Rollover Images.



GoLive will then automatically build the rollover for you.
A Great time saver if you have a lot of images with rollovers.
(I haven't figured this out yet but I don't usually have to do this for all my rollover
images - after doing it for one or two images it seems GoLive automatically starts
looking for and building the rollovers. Someone verify this for me. Nice.)
After, it will look like this:



Done with the first step.




Step Two - Floating Box Setup


From the Objects pallet, select the floating box object and drag it onto your page



I had three different menus so I dragged three floating boxes over.
Floating boxes are indicated by a little yellow icon on the page (you can make them
invisible if they bother your layout by going to View > Hide Invisible Items).
Floating boxes themselves are a simple line with a number in the lower right corner
so you can tell which one is which.
In the example below, you can see that I have put my sub-menus inside of the floating boxes.
It is very important that the sub-menu and the floating box are touching each other or even
over-lapping by one pixel. This ensures that the sub-menu will not hide before you can
navigate to it.



Next. Select the image that will trigger the visibility of your sub menu's floating box.
In the Actions pallet: 1. Select Mouse Enter. 2. Click the New Action button.
3. Go to the Actions Pop-Up and click to open it.



Now we are going to assign an action for the On Mouse Enter for the image.
Select the Multimedia > ShowHide Action.



Now you will need to tell GoLive which floating box to make visible on Mouse Over
by selecting it from the floating box menu and telling it to Show from the Mode Menu.
Now continue the step by making a On Mouse Exit action doing the same as above.
This time, tell GoLive to HIDE the layer. So, when you mouse over, show my sub-menu,
when the mouse leaves the image, hide my sub-menu.



At this point, if you were to view your page, when you mouse over your main
trigger image, it will show you your sub-navigation. BUT, if you try to navigate
to your sub-nav selections, they will suddenly dissapear. WHY? Because you
have not told the menu to still be visible when you are mousing over one of the
sub-menu selections. This is what you do. Repeat the process for every image
in your submenu that you did for the main image. Add a ShowHide action to each
image, assign it a floating box and a show or hide action. This is where it gets tedious.
BUT, you could be writing this code by yourself. Me, I like this way better.

**Note, I have since found that if you make the show/hide settings for one image in your submenu, you can then duplicate the image and it will retain the action settings. This is great because now all you need to do is drag your new button image ONTO the old image and it replaces the image and still keeps the settings of the previous. All you have to do is update the link!

Finally, you need to make sure your floating boxes containing your sub-navigation are
not visible when the page first loads. Select the Floating Boxes tab and select
a layer. Then, in the Inspector pallet, un-toggle the Visible box. Repeat for
each floating box you have. This also makes them invisible for you when working
on your page but you can turn them back on to check positon by selecting the
'eye' icon next to the floating box layer name in the Floating Box pallet.



Quite simple thanks to GoLive's Actions.
Almost done! One last step.




Step Three - Beware Generated Items


GoLive, by default, creates a 'GeneratedItems' folder in your site. Inside this folder
GoLive puts a file called 'CSScriptLib.js'. Again, by default, GoLive writes TONS of
of code to this file. If you are not using the built in GL FTP client (and even if you are)
before you upload your site, you need to find the file in your site window and
right-click on it. Select Flatten Script Library. It takes mine from a whopping 74K! -
- all the way down to around 2-3K. (You can also go to the GoLive preferences, select Site > Export > and then in the window, down towards the bottom, there is an options box called "Strip HTML Code For". At the bottom of that box there is a checkbox for Flatten Script Library. If you select it, it should flatten your site for you when you export or FTP)

Here is the finished tutorial page.
Thats it! Hope this helps those of you out there who are not coders like myself.
If you find corrections, have questions etc., let me know.





Back to Tutorials Page
Or visit «sad.ark»
©Jeff Seal 2002