In this article you learned how to create a floating menu with only a few simple lines of code. You learned how to make the menu float smoothly, and you learned how to give your floating menu 3D buttons and mouseover effects.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Floating Menu Code

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.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268