-
charly
.User deleted
Semplice eppure d'effetto e bastano poche righe, vediamo il codice.
HtmlCODICE<div class="menu1">
<a href="#"><span class="freccia">»</span> menulink</a;><br>
<a href="#"><span class="freccia">»</span> menulink</a;><br>
<a href="#"><span class="freccia">»</span> menulink</a;><br>
<a href="#"><span class="freccia">»</span> menulink</a;><br>
<a href="#"><span class="freccia">»</span> menulink</a;><br>
<a href="#"><span class="freccia">»</span> menulink</a;><br>
</div>
Css
.menu1{ /*Stile del livello che contiene il menų*/
background-color: #FFFFFF;
border: 1px solid #191970;
padding: 3px;
}
.menu1 a:link, .menu1 a:active, .menu1 a:visited{
color: #191970;
text-decoration: none;
}
.menu1 a:hover{
text-decoration: none;
color: #B22222;
}
.menu1 a:link .freccia, .menu1 a:active .freccia, .menu1 a:visited .freccia{
display: none; /*La freccia non si vede*/
}
.menu1 a:hover .freccia{
display: inline; /*La freccia č visibile sull'evento hover del link*/
}
Il nostro menų si trova in un div di classe menu1 (il nome della classe č assolutamente arbitrario), ogni link si trova su una riga ed č preceduto dal carattere "ŧ" (entitā html ŧ) che ci serve per creare il nostro effetto.
Con questo codice css
.menu1 a:link, .menu1 a:active, .menu1 a:visited{
color: #191970;
text-decoration: none;
}
.menu1 a:hover{
text-decoration: none;
color: #B22222;
}
Definiamo lo stile dei nostri link (il colore, ed eventualmente la sottolineatura) applicandolo contestualmente al div di classe menu1 cosė da isolarlo da altri eventualmente usati nella nostra pagina. Quindi provvediamo a far "sparire" la freccia e a farla "ricomparire" se si passa il mouse e lo facciamo con questo codice css:
.menu1 a:link .freccia, .menu1 a:active .freccia, .menu1 a:visited .freccia{
display: none;
}
Andiamo cioč ad identificare tutti gli elementi che si trovano nell'elemento di classe menu1 che siano racchiusi nel tag <a> e che siano di classe freccia in questo caso quindi il nostro
ŧ
quindi sempre con i css diamo al nostro menų il tocco finale, facciamo "ricomparire" la nostra freccia sull'evento hover creando un simpatico effetto di rollover
.menu1 a:hover .freccia{
display: inline;
}
.
InfoSharnet Componentistica Pc Assemblaggi Consigli e guide per formattazioni windows mac linux i migliori software 
html.css, Layout e Sfondi per Destkop
come Realizzare un menų verticale con i css |
