| | menu laterale posizione e copertura | |
| |
 | | |
| max_400_javascript |
| | Menu laterale posizione e coperturautilizzando css e javascript movimento al rollover menu laterale javascript posizionamento e copertura ESEMPIO menu laterale javascript posizionamento e coperturaHTML <style type="text/css">
#banana{margin-top:-510px;position:relative;z-index:2; width:200px;}
#menu {position:absolute; z-index:1; margin-left:210px;; margin-top:-90px; border:1px solid #009900; border-collapse:collapse; visibility:hidden;}
#quadrato {width: 800px; height:500px; border:5px solid #009900; margin-left:200px;}
td.txt {border:1px solid #000000; text-align:center; font-weight:bold; color:#FFCC00;}
td.txt a{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#FFCC00; text-decoration:none;}
td.txt a:hover{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#FFFFFF; text-decoration:none;}
</style>
<script>
var ie5= (document.getElementById && document.all);
var ns6= (document.getElementById && !document.all);
var MenuTop = 100; // posizione del menu rispetto alla parte superiore della pagina
var MenuLeft =150; // spostamento del menu
var timerID1 = null;
var timerID2 = null;
function statik(){
if(ie5){document.getElementById('menu').style.top = document.body.scrollTop + MenuTop;}
if(ns6){document.getElementById('menu').style.top = window.pageYOffset + MenuTop;}
}
function changeBG(obj, bgColor) {
if(ie5 || ns6){obj.style.backgroundColor = bgColor;}
}
function slideIn(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) < 0){
clearTimeout(timerID2);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) + 5 + "px";
timerID1=setTimeout("slideIn()", 30);}}
}
function slideOut(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) > -MenuLeft){
clearTimeout(timerID1);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) - 5 + "px";
timerID2=setTimeout("slideOut()", 30);}}
}
function reDo(){
if(ie5 || ns6){
window.location.reload(); }
}
function slideMenuInit(){
if(ie5 || ns6){
document.getElementById('menu').style.visibility = "visible";
document.getElementById('menu').style.left = -MenuLeft;
document.getElementById('menu').style.top = MenuTop;}
}
window.onresize = reDo;
setInterval ('statik()', 1);
</script>
<body onLoad="slideMenuInit()">
<div id="quadrato">
<table id="menu" width="190" border="1" cellpadding="3" cellspacing="0" bgcolor="#009900" bordercolor="#000000" onMouseOver="slideIn()" onMouseOut="slideOut()">
<tr><td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">primo link</a></td>
<td rowspan=6 class="txt">M<br/>E<br/>N<br/>U</td></tr>
<tr> <td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">secondo link</a></td></tr>
<tr> <td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">terzo link</a></td></tr>
<tr> <td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">quarto link</a></td></tr>
<tr> <td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">quinto link</a></td> </tr>
</table></div>
<div id="banana"><img src=th-200.jpg width=200 height=145></div>
| | | |
| |
|
| max_400 |
| | Non so voi ma a me mi piace molto non solo la foto di thais ma anche il menu
qualkosa di semplice e facilmente adattabile.
Sono molto interessanti i movimenti con javascript ma ovviamente con Flash si può fare di più
| | | |
| |
|
| 1 replies since 21/1/2012, 15:42 52 views |
| |
| | |
