gotFusion.com....... Where your adventure begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal

 


 


You may have been frustrated that your menu stays at the top of your page, so when your user scrolls down, they can't easily get to your other pages, unless they scroll back to the top of your page where your menu is.

And you may have seen a kind of floating menu on some sites, where, no matter how far down the user scrolls, the menu follows them - like this example: Test it

Here's how to turn a standard NOF navbar into one of these floating menus.

First, credit where it's due...
I got the script for this here: http://www.echoecho.com/toolfloatinglayer.htm

Their copyright restrictions won't allow me to distribute their script as part of a tutorial, so you will have to go to their site and get it yourself. But I can tell you how to make it work in NOF (including how to turn a standard NOF navbar into one of these floating menus) once you've got the script.

Here's how:

  • Copy all of the script from their site. I copied it into Notepad so I could easily copy the bits I wanted and put them where I wanted in NOF.

    There are two major bits. I'll call them A and B. A is one Javascript which they tell you to put in the Head of your page. B is actually two separate Javascripts (look closely and you'll see what I mean.) I'll call these B1 and B2. You have to split these latter two Javascripts and put them in slightly different places in NOF.
     
  • Into the Head of your NOF page, paste the section they say to put in your Head (A).
    (You will later need to edit the first few lines, as directed, to specify the postion of your menu - see the notes below on this.)
     
  • Put a table on your page somewhere.  Make it 1 cell wide by one deep. It doesn't really matter where you put it. I've put mine way down my page under all of my other stuff. It doesn't actually show up where you place it in NOF. It's published position is specified in the code. Here's where I put it:

  • In the table, put a NOF navbar (see the screengrab immediately above).
     
  • Select the table (as per the screengrab above).
     
  • On the Properties Palette, click the Table HTML button.
     
  • Go to the Before Tag area and paste in B1. Like this:
  • Go to the After Tag area and paste in B2. Like this:
  • (Note that your're not seeing all of the B2 script in this grab. Much of the script
       extends below the paste window.)

  • Publish.
     
  • Adjust the measurements for the position of the layer in the first few lines of the Javascript you pasted in the Head of yor document. You will need to do a number of trial and error publishes to get the position right. Here's the bit I'm talking about:
  • Note that the measurements above are the ones required for my example page.

____________________________________________________________________________

Notes:
You will not be able to center your page if you use this script. The position of the floating menu is fixed with relation to your browser. So, if you want to place your floating menu accurately, you will have to fix your page with relation to the top and left of your browser too. Otherwise, the position of the floating menu will vary depending on the size your user has their browser set to.

There is provision for you to specify in the Javascript you put in your Head (Script A), the height and width of the floating layer. (See layerwidth and layerheight in the screengrab above). I've not found it makes much difference what numbers I put here. I've tried from 0, 0 to 300, 300 and the menu still shows up just where I expect it to from how I specifed floatX and floatY.

The halign and valign parameters specify where you measure the distances from the borders of your browser. I generally find it best to refer everything from the top left corner of my browser. Hence halign="left" and valign="top".

The delayspeed parameter affects the speed at which the menu adjusts itself when you scroll. You will just have to fiddle with this until you get it the way you like it.

Return to the TOP of this page

 


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement