PDA

View Full Version : A Draggable Navigation Menu

Ges
03-11-2007, 12:41 PM
Hi,
Whilst working on the wizards on my site ( and help from a few friends ), we made a menu that you can drag around your web pages. It was based on some old code I got from who knows. Anyway, it now works in IE, FF and Opera. Have'nt tried it in other browsers. I am posting the code on 2 posts but simply put them in into the same file.
Here's the 1st part which actually forms the <head> section etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Draggable menu</title>

<style type="text/css">
<!--

.move
{
width:100%;
background-color:#000000;
border-bottom:1px solid blue;
font-size:14px;
font-family:vardana;
font-color:"#33CCAA";
text-align:center;
}

.info
{
width:100%;
background-color:#99CCFF;
border-top:1px solid blue;
font-size:13px;
font-family:vardana;
font-color:"#33CCAA";
}

<!-- SET THE START POSITION OF THE MENU HERE -->
.panel
{
width:150;
position:absolute;
border:1px solid blue;
left:10;
top:100;
font-size:13px;
font-family:vardana;
}

.panel a:visited{color:#000000;}
.panel a{text-decoration:none;color:blue}
.panel a:hover{text-decoration:none;}

#panel a.visited
{
text-decoration:none;
}

.menu
{
width:100%;
background-color:#ffccff;
font-size:13px;
font-family:vardana;
}

-->
</style>

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

N = (document.all) ? 0 : 1;
var ob;
var over = false;

// MOUSE DOWN
function MouseD(e)
{
if (over)
{
if (N)
{
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else
{
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
// MOUSE MOVE
function MouseM(e)
{
if (ob)
{
if (N)
{
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else
{
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
// MOUSE UP
function MouseU()
{
ob = null;
}

if (N)
{
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MouseD;
document.onmousemove = MouseM;
document.onmouseup = MouseU;

//-->
</script>

</head>


Ges.
Ges
03-11-2007, 12:50 PM
Here is post 2. This is the body section.


<body>
<div id="panel" class="panel" >

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

function getArray(id)
{
var splitarray = link[id].split("|");
return splitarray;
}
function info(i,obj,col)
{
sublink = getArray(i);
infobar = document.getElementById("infob");
infobar.innerHTML = sublink[2];
obj.style.backgroundColor=col;
}
function endi(obj,col)
{
obj.style.backgroundColor=col;
infobar = document.getElementById("infob");

}

// SIMPLY ADD MORE LINKS AND MENU ITEMS HERE
var link = new Array();
link[0] = "HOME |http://www.lissaexplains.com |Go to Lissa Explains Home Page";
link[1] = "W3|http://www.w3schools.com |W3schools main site";
link[2] = "HTML |http://www.w3schools.com/html/default.asp |Learning HTML";
link[3] = "XHTML |http://www.w3schools.com/xhtml/default.asp |Learning XHTML";
link[4] = "CSS |http://www.w3schools.com/css/default.asp |Learning CSS";
link[5] = "JAVASCRIPT |http://www.w3schools.com/js/default.asp |Learning Javascript";
link[6] = "HTML DOM |http://www.w3schools.com/htmldom/default.asp |Learning Document Object Models";
link[7] = "DHTML |http://www.w3schools.com/dhtml/default.asp |Learning Dynamic HTML";
link[8] = "USEFUL SCRIPTS |http://www.hotscripts.com |Lots of Javascripts and PHP etc";
document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>MAIN MENU</b></font></div><div class='menu'><br></div>");
for(i=0;i<link.length;i++)
{
sublink = getArray(i);
document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'#ffffff')\" onmouseout=\"endi(this,'#ffccff')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");
}
document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><br></div>");

//-->
</script>

</div>

<center>
<h1>NORMAL WEB CODE HERE</h1>
<h2>Pick up the menu using the 'MAIN MENU'</h2>
</center>

</body>
</html>



Simply add this to the end of the first posted code.
I have put comments in to show how to add more menu items and links. Also, the CSS can be changed to suit your own colors etc.

Well I hope you have fun with it and maybe it could prove useful to some.

Regards,
Ges.
onigiri
03-13-2007, 03:42 AM
Moved to User Submitted Tutorials. :)