> 
- Home Page
- > Script JavaScript
- > Script JavaScript Menu
- > Bottom menu
Bottom menu
A menu that appears from the bottom with a click of the mouse.
<style>
.menuStyle {
position: absolute;
top: 0;
left: 0;
width: 200;
}
a.link {
color: blue;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
}
a.link:hover {color: red; text-decoration: underline overline;}
</style>
<div id="menuLayer" class="menuStyle">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#000000">
<table border="0" width="200" cellspacing="1" cellpadding="0">
<tr><td align="center" bgcolor="#FFFFFF">
<!-- qui va il menù -->
<br>
<a class="link" href="#">Link1</a><br><br>
<a class="link" href="#">Link2</a><br><br>
<a class="link" href="#">Link3</a><br><br>
<a class="link" href="#">Link4</a><br><br>
<a class="link" href="#">Link5</a><br><br>
<!-- fine del menù -->
</td></tr>
</table>
</td></tr>
</table>
</div>
<div id="menuTesta" class="menuStyle">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#000000">
<table border="0" width="200" cellspacing="0" cellpadding="0">
<tr><td align="center" height="20" bgcolor="#EEEEEE"><a class="link" href="javascript:click()"><b><img src="bordo.gif" height="20" width="200" border="0"></img></b></a></td></tr>
</table>
</td></tr>
</table>
</div>
<script language="JavaScript">
var ie = (document.all) ? true : false;
var altezzaMenu = (ie) ? menuLayer.offsetHeight : document.menuLayer.document.height;
var larghezzaMenu = (ie) ? menuLayer.offsetWidth : document.menuLayer.document.width;
var altezzaTesta = (ie) ? menuTesta.offsetHeight : document.menuTesta.document.height;
(ie) ? menuLayer.style.visibility = "visible" : document.menuLayer.visibility = "visible";
(ie) ? menuTesta.style.visibility = "visible" : document.menuTesta.visibility = "visible";
var altezzaFinestra = (ie) ? document.body.offsetHeight : window.innerHeight;
altezzaFinestra -= 20;
var status = 0;
function click() {
if (status==0) {
status = -1;
apri();
}
if (status==1) {
status = -1;
chiudi();
}
}
function apri() {
if (ie) valoreNoto = altezzaFinestra - (altezzaTesta + altezzaMenu -1 + 4) + document.body.scrollTop;
else valoreNoto = altezzaFinestra - altezzaMenu - altezzaTesta - 1 + window.pageYOffset;
x = parseInt((ie) ? menuLayer.style.left : document.menuLayer.left);
if (x<-30) x += 30;
else x = 0;
(ie) ? menuLayer.style.left = x : document.menuLayer.left = x;
y = parseInt((ie) ? menuTesta.style.top : document.menuTesta.top);
if (y>(valoreNoto+30)) y -= 30;
else y = valoreNoto;
(ie) ? menuTesta.style.top = y : document.menuTesta.top = y;
if (x<0 || y>valoreNoto) var id = setTimeout("apri()",10);
else status = 1;
}
function chiudi() {
if (ie) valoreNoto = altezzaFinestra - (altezzaTesta + 4) + document.body.scrollTop;
else valoreNoto = altezzaFinestra - altezzaTesta + window.pageYOffset;
x = parseInt((ie) ? menuLayer.style.left : document.menuLayer.left);
if (x>30-larghezzaMenu) x -= 30;
else x = -larghezzaMenu;
(ie) ? menuLayer.style.left = x : document.menuLayer.left = x;
y = parseInt((ie) ? menuTesta.style.top : document.menuTesta.top);
if (y<(valoreNoto-30)) y += 30;
else y = valoreNoto;
(ie) ? menuTesta.style.top = y : document.menuTesta.top = y;
if (x>-larghezzaMenu || y<valoreNoto) var id = setTimeout("chiudi()",10);
else status = 0;
}
function regolaPosizione(a) {
if (status==0) {
if (ie) {
menuLayer.style.top = altezzaFinestra - (altezzaMenu + 4) + document.body.scrollTop;
menuLayer.style.left = -larghezzaMenu;
menuTesta.style.top = altezzaFinestra - (altezzaTesta + 4) + document.body.scrollTop;
} else {
document.menuLayer.top = altezzaFinestra - altezzaMenu + window.pageYOffset;
document.menuLayer.left = -larghezzaMenu;
document.menuTesta.top = altezzaFinestra - altezzaTesta + window.pageYOffset;
}
}
if (status==1) {
if (ie) {
menuLayer.style.top = altezzaFinestra - (altezzaMenu + 4) + document.body.scrollTop;
menuLayer.style.left = 0;
menuTesta.style.top = altezzaFinestra - (altezzaTesta + altezzaMenu -1 + 4) + document.body.scrollTop;
} else {
document.menuLayer.top = altezzaFinestra - altezzaMenu + window.pageYOffset;
document.menuLayer.left = 0;
document.menuTesta.top = altezzaFinestra - (altezzaTesta + altezzaMenu -1) + window.pageYOffset;
}
}
var id = setTimeout("regolaPosizione()",10);
}
regolaPosizione();
</script>
