golivebasics.com home page

Making a floating menu

Many thanks to Daverj for this action, which is a great improvement on others I've tried.

Download his actions from here and, with Golive closed, install them in the actions folder beside your other actions. Put the whole folder in there.

We are going to make a menu that floats gently down the page as you scroll. It doesn't have to be on the left - it can go across the top of the page, but then it will cover some of the content of the page as you scroll - this may not matter to you. It can be some distance across the page, but then you must set your overall table to a specific width, and not try to adjust the page width as people resize their browsers. This is because the floating menu is in a floating box, which will always be a set distance from the top and left of your screen, which can mess up your layout if you try to make it flexible.

I'm not telling the whole truth here, it's not impossible to have a floating box in a table cell, and have it move with that cell, or centre it on the page, but that doesn't belong in a 'basics' site.

My overall table is set to 95% width, but the menu is always on the left, so that's OK.

If you look at this table, you'll see I have left the left hand column empty of visible content, because I prefer not to have the menu covering any content. To leave it empty, I must make the top left cell span as many rows as I have in the table (10 in my case) - and put something in there because no cell should ever be left completely empty.

I could use a non-breaking space, or even a letter or two set to the same colour as the page, but I normally prefer to use a transparent gif resized to the correct width.

Also, I've set the right hand column to 98% rather than auto - otherwise it might shrink narrower in Netscape, allowing the left hand column to expand.

Make a table to hold your links and put it in the left hand cell.
Now put a floating box on the page - find it here, third from the left in the top row:
After you drop the floating box on the page, you'll see a small yellow box - drag that so it's the first thing on your page:

This represents the code for the FB (floating box) - this code should be at the beginning of the page.

Select the floating box itself (the cursor turns into a hand pointing left when you've got it) and drag it to roughly where you want it to appear at first. The thing you dragging is a square, with little blue squares around the edge.

Look in the inspector. Here you set the starting position from the top and left of the page, also the height and width of the floating box to match your links table.

Hint - to start with, have the FB (floating box) some way down the page, so it isn't covering your table. You can move it later.

Now drag the links table inside the FB. Selecting the table is a little bit tricky sometimes - you're looking for a little square by the cursor arrow. Or if you manage to select a table cell, you can switch to the table palette to select the table, or use the mark up tree at the bottom of the page.

Now position your FB correctly.

Once the table is inside the FB, preview in as many browsers as you have access to, to make sure the FB is in the right place. Your floating box needs a name - Golive has probably called it layer1 for you. That's fine, or you can change it, mine is called 'menu'. Usual conventions, no spaces or special characters.
Now everything is set up to make the menu float.
Turn down the triangle at the top of the page, just by the title, to reveal the head section. Drag a head action in there:
Select it, and in the inspector find your way to Dave's action:

Set the starting position - I have to admit, I don't know if you have to do this in the action AND on the page, so I do both.

That's it!

(Don't forget to set a smoothness, left at zero the action doesn't work).

Back to top

golivebasics.com home page