Easy Floating Menu Code
By Stephen Bucaro
Good Web design limits the amount of scrolling required by the user. You can totally
eliminate the need to scroll by making all your webpages only one screen high. But
then, to read a long article, the user has to click through many pages. A good compromise
is to limit the length of your page to about three screens high. But even then, when the user
scrolls to the bottom of the page, the menu goes off screen. Solution - floating menu.
You've probably come across a website where the menu stays in view by moving down or
moving up the page as the user scrolls. Search the web for sample code for a floating
menu and you'll find only complex, convoluted, and bloated code. In this article I show
you how to create a floating menu with only a few simple lines of code.
To make a menu float, you need to put the menu links inside an html div element
as shown below.
<div id="menu" style="left:4px; top:110px;">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
<a href="#">Link 4</a><br />
<div>
Paste this code into the body of your webpage. Note that the inline style rules
that set the left and top properties of the div. Change these numbers
to set the initial location of your floating menu. Replace the pound (#) signs with your links,
and replace the text "Link 1" ... with your link text. You can add as many links as you need.
Next you need a Java Script function to make the menu float. Paste the Java Script code
block shown below into the <head> section of your webpage.
<script type="text/javascript">
var startY = 110;
var sy;
function floatMenu()
{
if(document.documentElement.scrollTop)
{
sy = document.documentElement.scrollTop;
}
else
{
sy = document.body.scrollTop;
}
var temp = sy + startY;
var newY = temp.toString() + "px";
var elem = document.getElementById("menu");
elem.style.top = newY;
}
window.onscroll = floatMenu;
</script>
Note that the first line in the code sets a variable named startY to the
same value as the top property of the div. Change this number to the
initial location of your floating menu.
Within the floatMenu function, the first code is an if/else statement
that sets the variable sy to the document's scrollTop position. The reason
an if/else statement is needed is because when this code is used with the
Transitional DOCTYPE, the document.body property is replaced by the
document.documentElement property.
After the if/else statement, the document's scrollTop position is
added to the initial location startY to calculate the new position. Note that
the sum is placed in a variable named temp. This is because in the next line
it's formatted into a proper string which will be acceptable to assign to the divs
top property.
Then the document.getElementById method is used to get a referrence to the
div object, and that referrence is used to set the divs top property
to the new position.
The last line in the Java Script code block assigns the floatMenu function
to the window.onscroll event.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
Advertise Here
News Feeds
RSS Feed
General Web Design
