Cerca

Un semplice menu in javascript

Indice Articolo

Ultimi articoli pubblicati

Uno script per un semplice menu in javascript, tanto per capire quanto può essere facile fare un menu e personalizzarlo.

Ricopia il codice in un file .htm e esegui.



<html>
<body>

<div id=”menu” onclick=”gest(‘menu’)” style=”text-align:center;background-color:#6666FF”>
<font color=”#ffffff”>menu</font>
</div>

<div id=”sotto1″ style=”text-align:center;background-color:#66FFFF”>
<a href=”#”>sot menu 1</a>
</div>

<div id=”sotto2″ style=”text-align:center;background-color:#66FFFF”>
<a href=”#”>sot menu 2</a>
</div>

<div id=”sotto3″ style=”text-align:center;background-color:#66FFFF”>
<a href=”#”>sot menu 3</a>
</div>

</body>

</html>

<script language=”javascript”>

document.getElementById(“sotto1″).style.visibility=”hidden”;
document.getElementById(“sotto1″).style.position=”absolute”;
document.getElementById(“sotto1″).style.top=”58px”;
document.getElementById(“sotto1″).style.left=”300px”;
document.getElementById(“sotto1″).style.width=”100px”;

document.getElementById(“sotto2″).style.visibility=”hidden”;
document.getElementById(“sotto2″).style.position=”absolute”;
document.getElementById(“sotto2″).style.top=”76px”;
document.getElementById(“sotto2″).style.left=”300px”;
document.getElementById(“sotto2″).style.width=”100px”;

document.getElementById(“sotto3″).style.visibility=”hidden”;
document.getElementById(“sotto3″).style.position=”absolute”;
document.getElementById(“sotto3″).style.top=”94px”;
document.getElementById(“sotto3″).style.left=”300px”;
document.getElementById(“sotto3″).style.width=”100px”;

document.getElementById(“menu”).style.position=”absolute”;
document.getElementById(“menu”).style.top=”40px”;
document.getElementById(“menu”).style.left=”300px”;
document.getElementById(“menu”).style.width=”100px”;

 

vmenu=0;

function gest(m){

    if (vmenu==0) {

 document.getElementById(“sotto1″).style.visibility=”visible”;
 document.getElementById(“sotto2″).style.visibility=”visible”;
 document.getElementById(“sotto3″).style.visibility=”visible”;
 vmenu=1;
 
    } else {

 document.getElementById(“sotto1″).style.visibility=”hidden”;
 document.getElementById(“sotto2″).style.visibility=”hidden”;
 document.getElementById(“sotto3″).style.visibility=”hidden”;
 vmenu=0;

    };

};

</script>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

venti + 9 =