Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Floating Menu
JavaScript can power a floating menu, that actually can 'float' a navigation bar menu to anywhere on the page, with the click of a mouse! Amazing!
Click on "Moveable Menu" to pick
it up and Double Click to drop it!
Movable Menu
Menu Item # 1
Menu Item # 2
Menu Item # 3
Insert into <HEAD>
<SCRIPT LANGUAGE="JavaScript"&rt; <!-- Original: Randy Bennett (rbennett@thezone.net) --&rt; <!-- Web Site: http://home.thezone.net/~rbennett/utility/javahead.htm --&rt; <!-- This script and many more are available free online at --&rt; <!-- JavaScript Made Easy!! http://www.jsmadeeasy.com --&rt; <!-- Begin var XX,YY,h,v,dS,sD,objectX; var isNav = (navigator.appName.indexOf("Netscape") !=-1); var isIE = (navigator.appName.indexOf("Microsoft") !=-1); objectX="object11"; XX=-70; YY=-70; OB=11; xpos1=50; // make this the left pixel value for object1 below ypos1=50; // make this the top pixel value for object1 below xpos11 = -50; ypos11 = -50; Xpos=5; Ypos=5; check="no"; if (isNav) { document.captureEvents(Event.CLICK); document.captureEvents(Event.DBLCLICK); document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = MoveHandler; document.onclick = getObject; document.ondblclick = releaseObject; moveOB(); 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() { if (isNav) document.releaseEvents(Event.MOUSEMOVE); check="no"; objectX="object11"; document.close(); } function moveOB() { if (document.getElementById(objectX) != undefined && document.getElementById(objectX) != null) { if (isNav) { document.getElementById(objectX).style.left = Xpos; document.getElementById(objectX).style.top = Ypos; } else { document.getElementById(objectX).style.pixelLeft = Xpos; document.getElementById(objectX).style.pixelTop = Ypos; } } } function MoveHandler(e) { Xpos = (isIE) ? event.clientX : e.pageX; Ypos = (!isIE) ? 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(); } // End --&rt; </script&rt;
Insert into <BODY>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag --> <BODY OnLoad="checkVersion4()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <!-- Demonstration --> <b>Click on "Moveable Menu" to pick<br> it up and Double Click to drop it!</b> <br> <div id="object1" style="position:absolute; visibility:show; left:50px; top:50px; z-index:2"> <table border=1 cellpadding=5> <tr> <td bgcolor=eeeeee><a href="javascript:void(0)" onmousedown="setObject(1)">Movable Menu</a></td> </tr> <tr> <td> <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>
Other Options