Menu à déplacer
Vous avez envie de créer des menus que l’on peut déplacer n’importe où dans votre page web.
Voici un exemple de code JavaScript à insérer dans votre page.
ATTENTION : Si vous voyez apparaître des petits carrés noirs, c’est que c’est un problème d’éditeur. Remplacez ces carrés noirs par un saut de ligne (la touche Entrée).
Créer ce fichier "menu_mob.js" :
/*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
http://www.editeurjavascript.com
*/
document.write('<style type="text/css">\nA.ejsmenu { color:#FF9900;text-decoration:none }\n</style>')
document.write('<DIV id=menu_dep STYLE="position:absolute; top:10; left:10"><TABLE BORDER=0 CELLPADDING=1 CELLSPACING=2 WIDTH=150>')
document.write('<TR><TD BGCOLOR=#000000 onMouseDown="testClick()" onMouseUp="testClick2()" style="cursor:move"><FONT SIZE=2 face="Verdana" COLOR=#FFCC00><B>Menu</B></FONT></TD></TR>')
document.write('</TR></TABLE></DIV>')
clickOui = false;
bloc_x = 10;
bloc_y = 10;
function testClick() {
base_x = x-bloc_x;
base_y = y-bloc_y;
clickOui=true;
}
function testClick2() {
clickOui=false;
}
function get_mouse(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
if(clickOui && document.getElementById)
{
bloc_x = x-base_x;
bloc_y = y-base_y;
}
document.getElementById("menu_dep").style.left = bloc_x
document.getElementById("menu_dep").style.top = bloc_y
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
Dans votre page html, placez le code suivant :
<script language="JavaScript" src="menu_mob.js"></script>
entre les balises <BODY> et </BODY> à l’endroit où vous désirez.