3 CSS Stylish Menu
Tutorial css
Oggi parliamo di come realizzare in pochi passi menu semplic e belli grazie ai CSS.
Click sulle immagini per ingrandire.
Side Menu in CSS
Side Menu
Dopo aver realizzato il vostro contenitore principale potrete posizionare il vostro Side Menu (dinamico) grazie al seguente codice:
#side-box {
top: 50px; // % se preferite
height: auto;
width: auto;
padding: 15px 10px 15px 10px //top-value right-value bottom-value left-value
background-color: #FFFFFF;
float: right; //o left (scegliete voi)
}
Trasparent Menu in CSS
Trasparent Menu
il codice non cambia molto se non per il background:
#side-box {
top: 50px; // % se preferite
height: auto;
width: auto; (potete scegliere di dare larghezza fissa)
padding: 15px 10px 15px 10px //top-value right-value bottom-value left-value
background: trasparent;
float: right; //o left (scegliete voi, potete anche scegliere di posizionarlo in una zona ben precisa e non lateralmente)
}
Panel Menu in CSS
Panel Menu
#panel-box {
top: 0px; // % se preferite
height: background-image-height-in-px;
width: background-image-width-in-px;
padding: 15px 10px 15px 10px //top-value right-value bottom-value left-value
background: url('background-file-name') no-repeat center top;
float: right; //o left (scegliete voi, potete anche scegliere di posizionarlo in una zona ben precisa e non lateralmente)
}
Non dimenticate di usare position in modo opportuno, absolute o relative a seconda del caso.
Come potete osservare si tratta di semplice codice CSS, nulla di complicato, se poi questo codice lo integreate con jQuery potrete creare menu spettacolari, accessibili e funzionali. Non dimenticate però di creare immagini che diano un tocco di originalità a tutto il layout.