Menu verticale animato ed espandibile

WMStiffler

Nuovo Utente
30 Dic 2009
1
0
0
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
TONY1960 [HTML] MENU VERTICALE SEMPRE VISIBILE Offerte e Richieste di Lavoro e/o Collaborazione 6
N Menu verticale semplice stile Yahoo WordPress 2
Shyson Menu verticale Javascript 16
P Menu verticale con subvoci HTML e CSS 1
Artemisia Menu verticale link aperto Javascript 1
R Come modificare un menu verticale spry con Dreamweaver Webdesign e Grafica 8
A Menu verticale con immagini Javascript 3
N menu a espansione verticale Javascript 2
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
S spostare il pulsante menu dropdown HTML e CSS 8
F Dropdown menu con tabella PHP 33
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
P [Javascript] Voce del menu evidenziata in base alla pagina attiva Javascript 48
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
P [Javascript] problema menu responsive su aruba, editor bk Javascript 1
Hellgrom90 Hamburger menu non si chiude jQuery 1
K [Javascript] Finestra menu Javascript 1
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
M [PHP] Menu a tendina dinamico che non si aggiorna PHP 2
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5

Discussioni simili