ciao a tutti
ho un problema con due script, in una stessa pagina;
praticamente ho due menu:
uno orizzontale a cui ho associato un animazione e,
uno in verticale a cui ho associato un animazione diversa;
l'animazione del menu orizzontale funziona correttamente, mentre non funziona quella del menu in verticale.
Posto qui sotto il codice:
<style type="text/css">
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 12px;
}
/*sliding-navigation3*/
#sliding-navigation3 { width:200px}
#sliding-navigation3 ul {
list-style: none;
}
#sliding-navigation3 a, #sliding-navigation3 h3.principal {
width: 130px;
display: block;
padding: 3px 5px 3px 40px;
background: #45B4E0 center right no-repeat;
margin: 5px 0;
text-decoration: none;
}
#sliding-navigation3 a {
color: #fff;
}
#sliding-navigation3 h3.principal {
background: #3072C7 center right no-repeat;
padding: 4px 5px 4px 40px;
margin: 8px 0;
}
#sliding-navigation3 h3 {
font-size: 13px;
}
#sliding-navigation3 h3.principal {
color: #cbcbcb;
text-shadow: 1px 2px 1px #222;
}
ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sliding-navigation3 ul li a").mouseover(function(){
$(this).stop().animate({paddingLeft: '20px'},50);
$(this).css({'background-color' : '#D96528'});
});
$("#sliding-navigation3 ul li a").mouseout(function(){
$(this).stop().animate({paddingLeft: '40px'},50);
$(this).css({'background-color' : '#45B4E0'});
});
});
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
/* example a: top down */
$$('#a a').each(function(el) {
//fx
var fx = new Fx.Tween(el,{
duration: 500,
link: 'cancel'
});
//css & events
el.setStyle('background-position','-20px 35px').addEvents({
'mouseenter': function(e) {
e.stop();
fx.start('background-position','-20px 94px');
},
'mouseleave': function(e) {
e.stop();
fx.start('background-position','-20px 35px');
}
});
});
});
</script>
</head>
<body>
<table width="955" border="0" cellpadding="1">
<tr>
<td colspan="4" bgcolor="#042c51">
[img]template 5/template 5/images/header.jpg[/img]</td>
</tr>
<tr>
<td colspan="4" bgcolor="#042c51">
<h1>Menu</h1> -->Menu orizzontale
<ul id="a">
[*]Home
[*]About
[*]Contact
[/list]
</td>
</tr>
......................
......................
.....................
<td width="201" rowspan="2" valign="top"> --->Menu Verticale
<div id="sliding-navigation3">
<h3 class="principal">Link Utili</h3>
<ul>[*]Corriere.it[*]La Repubbliche[*]Tgcom.it[*]Forum di categoria[*]Forum[*]Forum[/list]</div></td>
Mi interesserebbe far "coesistere" entrambe le animazioni.
Inoltre ho problemi di visualizzazione con mozilla, per il menu verticale, praticamente mi sovrappone le voci del menu.
Potete per piacere darmi una mano?
grazie a tutti anticipatamente
Rispondi quotando
