- Home Page
- > Script JavaScript
- > Script JavaScript Menu
- > Floating Menu
Floating Menu
A menu that you can move everywhere in you page
<HTML><HEAD><TITLE>Document Title</TITLE>
<script>
function checkBrowserForVersion4(){
var x = navigator.appVersion;y = x.substring(0,4);
if (y>=4) setVariables();
}
function setVariables(){
if (navigator.appName == "Netscape"){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);}
var isNav = (navigator.appName.indexOf("Netscape") !=-1)
var isIE = (navigator.appName.indexOf("Microsoft") !=-1)
check="no"
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){
//the window or the document or the layer may capture mousemoves
document.captureEvents(Event.CLICK);document.captureEvents(Event.DBLCLICK);}
xpos1=50;ypos1=80;xpos11=-50;ypos11=-50;Xpos=5;Ypos=5
document.onmousemove = MoveHandler;document.onclick = getObject;
document.ondblclick = releaseObject;
</script>
</HEAD>
<BODY onload="checkBrowserForVersion4();">
<b>Click on "Moveable Menu" to pick it up<br>
and Double Click to drop it!</b><br>
<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><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></CENTER></td></tr></table></div>
<div id="object11" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2"></div>
</BODY></HTML>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.