salve a tutti ragazzi ho un problemino mi è stato richiesto per un sito un menu semplice ma che sia animato e quindi avevo optato con un jquery facendo in modo che al passaggio del mouse le scritte prendessero un margine di 20 px creando così un piccolo movimento verso destro... il problema sorge quando il cliente in questione mi ha chiese di aggiungere un sotto menu ad una voce io in 2 secondi ho aggiunto le voci e queste mi vengono visualizzate automaticamente ora il mio cliente mi ha chiesto se potevo nascondere queste voci del sotto menu e fare in modo che al passaggio del mouse queste voci appaiano... ci posto i codici che ho usato la pagina
Citazione:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prova</title>
<script type="text/javascript" src="script.js"></script>
<link href="menu/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="menu/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});
$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});
});
</script>
</head>
<body>
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Home</a></li>
<li class="sliding-element"><a href="#">Compagnia</a>
<ul>
<liclass="sliding-element"><a href="#">Compagnia</a></li>
</ul>
</li>
<li class="sliding-element"><a href="#">Produzioni</a></li>
<li class="sliding-element"><a href="#">News</a></li>
<li class="sliding-element"><a href="#">Laboratori</a></li>
<li class="sliding-element"><a href="#">Stagione</a></li>
<li class="sliding-element"><a href="#">Contatti</a></li>
</ul>
</body>
</html>
il file di css
Citazione:
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 12px;
}
.menu {
height: auto;
width: 148px;
background-color: #3c86c1;
border: 1px #bababa solid;
}
.menu .menu_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #000000;
}
.menu1 {
height: auto;
width: 148px;
background-color: #3c86c1;
border: 1px #bababa solid;
}
.menu1 .menu1_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #000000;
border-bottom: 1px solid #7A7A7C;
}
#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation li.sliding-element a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#000000;
border: 1px solid #830628;
text-decoration: none;
}
.menu2 {
height: auto;
width: 148px;
background-color: #ECEFF5;
border: 1px #bababa solid;
}
.menu2 .menu2_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #3B5998;
border-bottom: 1px solid #7A7A7C;
}
#sliding-navigation1
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation1 li.sliding-element1 a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#3B5998;
border: 1px solid #1a1a1a;
text-decoration: none;
}
#sliding-navigation2
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation2 li.sliding-element2 a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#3B5998;
border: 1px solid #1a1a1a;
text-decoration: none;
}
.decription{
padding-top: 5px;
font-size: 10px;
display: none;
}
/*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;
}
il file jquery
Citazione:
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
aiutatemi sono disperato
Citazione:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prova</title>
<script type="text/javascript" src="script.js"></script>
<link href="menu/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="menu/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});
$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});
});
</script>
</head>
<body>
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Home</a></li>
<li class="sliding-element"><a href="#">Compagnia</a>
<ul>
<liclass="sliding-element"><a href="#">Compagnia</a></li>
</ul>
</li>
<li class="sliding-element"><a href="#">Produzioni</a></li>
<li class="sliding-element"><a href="#">News</a></li>
<li class="sliding-element"><a href="#">Laboratori</a></li>
<li class="sliding-element"><a href="#">Stagione</a></li>
<li class="sliding-element"><a href="#">Contatti</a></li>
</ul>
</body>
</html>
il file di css
Citazione:
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: 'segoe ui', 'Tahoma', 'Verdana', 'lucida grande', sans-serif;
font-size: 12px;
}
.menu {
height: auto;
width: 148px;
background-color: #3c86c1;
border: 1px #bababa solid;
}
.menu .menu_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #000000;
}
.menu1 {
height: auto;
width: 148px;
background-color: #3c86c1;
border: 1px #bababa solid;
}
.menu1 .menu1_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #000000;
border-bottom: 1px solid #7A7A7C;
}
#sliding-navigation
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation li.sliding-element a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#000000;
border: 1px solid #830628;
text-decoration: none;
}
.menu2 {
height: auto;
width: 148px;
background-color: #ECEFF5;
border: 1px #bababa solid;
}
.menu2 .menu2_liste li a {
display:block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
text-decoration:none;
color: #3B5998;
border-bottom: 1px solid #7A7A7C;
}
#sliding-navigation1
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation1 li.sliding-element1 a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#3B5998;
border: 1px solid #1a1a1a;
text-decoration: none;
}
#sliding-navigation2
{
list-style: none;
font-size: .75em;
margin: 30px 0;
padding: 0;
}
#sliding-navigation2 li.sliding-element2 a
{
display: block;
width: 148px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 4px;
margin: 0;
margin-bottom: 5px;
color: #fff;
background:#3B5998;
border: 1px solid #1a1a1a;
text-decoration: none;
}
.decription{
padding-top: 5px;
font-size: 10px;
display: none;
}
/*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;
}
il file jquery
Citazione:
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
aiutatemi sono disperato
