September 11
CSS3 è l'ultima versione di Cascading Style Sheets, l'aggiunta di nuove funzionalità come le animazioni, le pendenze e il supporto per i bordi curvi. CSS3 offre ai progettisti Web l'opportunità di progettare menu funzionali ed esteticamente gradevoli durante l'utilizzo di relativamente poche risorse. menu CSS3 possono essere implementate rapidamente, senza la necessità di script JavaScript risorse pesanti o menu basati su Flash. La codifica CSS3 per i menu a discesa può essere aggiunto al codice CSS esistente in un tempo relativamente breve periodo di tempo.
1 Aprire la pagina pagina CSS o HTML esterno la cui intestazione contiene il codice CSS nel vostro editor HTML. Creare spazio per il codice CSS3 che compone il menu a discesa ovunque tu mantenere le informazioni CSS. Se si utilizza un file CSS esterno, assicurarsi che il file sia correttamente riferimento nella pagina HTML.
2 Inserire il seguente codice CSS3 per la barra di navigazione principale e pulsanti:
nav {
margin: 0;
padding: 7px 6px 0;
background: # 7d7d7d URL (img / gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px RGBA (0,0,0, 0,4);
-moz-box-shadow: 0 1px 3px RGBA (0,0,0, 0,4);
}
nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
3 Aggiungere il seguente codice CSS3 per il principale stile di collegamento di livello e cursore del mouse hover:
/
Main collegamento livello /
nav un {
font-weight: bold;
color: # e7e5e5;
text-decoration: none;
blocco di visualizzazione;
padding: 20px 8px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba (0,0,0, 0,3);
}
nav a: hover {
background: #000;
colore: #fff;
}
/ Principale collegamento livello hover /
nav .Current una, #nav li: hover> a {
background: #666 URL(img/gradient.png) repeat-x 0 -40px;
color: # 444;
border-top: 1px solid # f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
-moz-box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
box-shadow: 0 1px 1px rgba (0,0,0, 0,2);
text-shadow: 0 1px 0 RGBA (255,255,255, 1);
}
4 Aggiungere il seguente codice CSS3 per
/
Link livelli sub hover /
nav ul li: hover una, #nav li: hover li a {
background: none;
border: none;
color: # 666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
nav ul a: hover {
background: #0078ff URL(img/gradient.png) repeat-x 0 -100px !important;
! Colore: #fff importante;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba (0,0,0, 0,1);
}
5 Aggiungere il seguente codice CSS3 per l'elenco a discesa e suoi vari effetti:
/
Discesa /
nav li: hover> ul {
display: block;
}
/ Livello 2 lista /
nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
sfondo: URL #ddd (img / gradient.png) repeat-x 0 0;
border: 1px solid # b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px RGBA (0,0,0, 0,3);
-moz-box-shadow: 0 1px 3px RGBA (0,0,0, 0,3);
box-shadow: 0 1px 3px RGBA (0,0,0, 0,3);
}
nav ul li {
float: none;
margin: 0;
padding: 0;
}
nav ul un {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/ Livello 3+ lista /
nav ul ul {
left: 181px;
top: -3px;
}
6 Aggiungere il seguente codice CSS3 per creare angoli arrotondati per i menu di navigazione. Si noti che gli angoli arrotondati potrebbero non essere visualizzati correttamente in alcuni browser:
/ Angoli arrotondati di primo e ultimo anello /
nav ul li: first-child> a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
nav ul li: last-child> a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
Al termine, salvare il file CSS.