LinkBack URL
About LinkBacksciao a tutti sto imparando jquery e volevo vedere come era stato fatto un menù a tendina solo che non riesco a capire una cosa:
la cosa che non riesco a capire è a cosa si riferisce la parola chiave 'this' in questo momento.Codice PHP:<HTML>
<HEAD>
<META NAME="GENERATOR" Content="AlterVista - Editor HTML">
<TITLE></TITLE>
<script src="http://dprove.altervista.org/javascript/jquery/jquery.js"></script>
<script>
$(document).ready(function () {
$('#nav li').hover(
function () {
//mostra sottomenu
$('ul',this).stop(true, true).delay(50).slideDown(100);
},
function () {
//nascondi sottomenu
$('ul',this).stop(true, true).slideUp(200);
}
);
});
</script>
<style>
body {
font-family:arial;
font-size:11px;
}
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
display:block;
width:100px;
background:#E0E0E0;
position:relative;
z-index:500;
margin:0 1px;
-webkit-transition: all 0.1s ease-in-out;
}
#nav li.first {
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
}
#nav li.last {
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
}
#nav li li.last {
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
text-align:center;
color:#333;
}
#nav li a:hover {
color:#C00;
}
#nav li li:hover {
-webkit-transform: translate(+10px,0);
}
#nav a.selected {
color:#C00;
}
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
#nav ul a {
display:block;
height:auto;
padding: 8px 5px;
color:#666;
}
/* fix ie6, meglio inserirlo in un file .css separato */
*html #nav ul {
margin:0 0 0 -2px;
}
</style>
</HEAD>
<BODY>
<ul id="nav">
<li class="first"><a href="#">Voce 01</a></li>
<li><a class="selected" href="#">Voce 02</a>
<ul>
<li><a href="#">Sottovoce Menu Numero 01</a></li>
<li><a href="#">Sottovoce Menu Numero 02</a></li>
<li class="last"><a href="#">Sottovoce Menu Numero 03</a></li>
</ul>
</li>
<li><a href="#">Voce 03</a>
<ul>
<li><a href="#">Sottovoce Menu Numero 04</a></li>
<li><a href="#">Sottovoce Menu Numero 05</a></li>
<li><a href="#">Sottovoce Menu Numero 06</a></li>
<li class="last"><a href="#">Sottovoce Menu Numero 07</a></li>
</ul>
</li>
<li class="last"><a href="#">Voce 04</a></li>
</ul>
</BODY>
</HTML>
Grazie in anticipo
Visualizzazione risultati 1 fino 2 di 2
Discussione: Piccolo problema in jquery
-
10-09-2011, 17.37.26 #1Guest
Piccolo problema in jquery
-
10-09-2011, 17.46.33 #2Guest
Vuol dire proprio quello che c'è scritto: QUESTO!
Indica l'emento interessato dall'evento.
