Sandeep's Nook: JavaScript Page

Floating Drop Down Navigation Menu

With the help of this script you can put up a drop down navigation menu on your website in such a way that it floats on the page in any particular location that can be set. The menu hovers at the same place even if you scroll down the page. In the example seen here the drop down navigation menu in yellow is floating on the top right side of the browser window.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

<script language="JavaScript" type="text/javascript">


<!--
var x1 = 155;  // change the # on the left to adjust the X co-ordinate
var y1 = 20;   // change the # on the left to adjust the Y co-ordinate

(document.getElementById && !document.all) ? dom = true : dom = false;

function typeStart() {
  if (dom) {
    document.write('<div id="logoBox" style="position:absolute; left:' + (window.innerWidth-x1) + 'px; visibility:visible">') }
  if (document.all) {
    document.write('<div id="logoBox" style="position:absolute; left:' + (document.body.clientWidth-x1) + 'px; visibility:visible">') }
 }

function typeEnd() {
  if (document.all || dom) { document.write('</div>') }
 }

function placeIt() {
  if (dom) {document.getElementById("logoBox").style.top = window.pageYOffset + y1 + "px";
            document.getElementById("logoBox").style.left = window.pageXOffset + x1 + "px";}
  if (document.all) {document.all["logoBox"].style.top = document.documentElement.scrollTop + y1 + "px";
                     document.all["logoBox"].style.left = document.documentElement.scrollLeft + x1 + "px";}
  window.setTimeout("placeIt()", 10);
 }
// -->
</script>

Note the script in the BODY tag:

<body onLoad="placeIt()">

This goes in the BODY of the html file: