Enterprise Software

Stupid Web Tricks: Build a drag-and-drop navigation menu

Let users decide where your menu goes. Learn to build a drag-and-drop site menu.

Click here for our complete list of Stupid Web Tricks.

By Sarahjane White
(11/30/99)

Where is the best place to put your page's navigation menu? Randy Bennett's Web site proves it can be anywhere at any time. With this innovative drag-and-drop menu, users can actually pick up your page's menu and move it anywhere in their browser window. This trick works on the major browsers versions 4.0 and up, but Bennett has thoughtfully included a browser sniffer, so if users do have older browsers, it will merely display a static page.

To place the code for the drag-and-drop menu on your HTML page, first copy and paste the following JavaScript code into the head of your document:

<script language="JavaScript1.2">

var xpos1=50, ypos1=80, xpos11=-50, ypos11=-50, Xpos=5, Ypos=5
var isNav = (document.layers)
var isIE = (document.all)
check="no"

function setVariables() {
   if (isNav) {
      h=".left=", v=".top=", dS="document.", sD="";
      } else {
      h=".pixelLeft=", v=".pixelTop=", dS="", sD=".style";
      }
   objectX="object11";XX=-70;YY=-70;OB=11
   }

function setObject(a) {
   objectX="object"+a;
   OB=a;
   XX=eval("xpos"+a);
   YY=eval("ypos"+a);}

function getObject() {
   if (isNav) document.captureEvents(Event.MOUSEMOVE);
   }

function releaseObject() {
   check="no";
   objectX="object11";
   document.close()
   }

function moveOB() {
   eval(dS+objectX+sD+h+Xpos);
   eval(dS+objectX+sD+v+Ypos);
   }

function MoveHandler(e) {
   Xpos = (isIE) ? event.clientX : e.pageX;
   Ypos = (isNav) ? e.pageY : event.clientY;    if (check=="no") {
      diffX=XX-Xpos;diffY=YY-Ypos;check="yes";
      if (objectX=="object11")check="no";
      }
   Xpos+=diffX;Ypos+=diffY;
   if (OB=="1")xpos1=Xpos,ypos1=Ypos;
   moveOB();
   }

if (isNav) {
document.captureEvents(Event.CLICK);
document.captureEvents(Event.DBLCLICK);
}

document.onmousemove = MoveHandler;
document.onclick = getObject;
document.ondblclick = releaseObject;

if (isNav || isIE) {
   window.onload=setVariables;
   }
</script>

Finally, paste the following HTML code into the body region of your page.

<div id="object1" style="position:absolute; visibility:show; left:50px;top:80px; z-index:2">
<table border=1 cellpadding=5><tr><td bgcolor="#eeeeee"><a href="javascript:void(0)" onmousedown="setObject(1)">Moveable Menu</a></td></tr>
<tr><td align=center><br><A HREF="javascript:void(0)">Menu Item # 1</A><br><A HREF="javascript:void(0)">Menu Item # 2</a>
<br><A HREF="javascript:void(0)">Menu Item #3</a></td></tr></table></div>

<div id="object11" style="position:absolute; visibility:show; left:-70px;top:-70px; z-index:2"></div>

That's it! To test it out, click a link to drag it and double-click to drop it.

Sarahjane White is an editorial research assistant for CNET Web Building. She is also the creator of della, a tricky Web site that is just a little stupid.

Editor's Picks

Free Newsletters, In your Inbox