Come creare un menu da psd all’html
Oggi vi faccio vedere come ho realizzato un menu molto particolare, con etichette le quali a seconda se attive o meno si trovano sopra o sotto una linea di sfondo, come vedete nell’immagine.
Questo particolare tipo di menù è realizzato con 4 etichette sotto la linea di sfondo e una che di vonta in volta spostiamo per realizzare l’immagine di active del punsante. Di fatti esportiamo 5 immagini contente tutto il nostro menu, una con senza alcun active e le altre 4 per ciascun link active del nostro menu.Come vedete nelle 2 immagini quì sotto.
Se necessitate di avere più link, sarà facile aggiungere un altro tab allargando ovviamente il riquadro del nostro file psd.
Analizziamo il codice utilizzato.
</pre> <!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>V-designs Menu </title> <link href="menu.css" rel="stylesheet" type="text/css" media="screen"/> </head> <body> <div id="menu"> <ul> <li>HOMEPAGE</li> <li><a href="#">DOVE SIAMO</a></li> <li><a href="#">CONTATTI</a></li> <li><a href="#">PHOTOGALLERY</a></li> </ul> </div> </body> </html>
</pre>
/************** MENU *************/
#menu {width: 590px; height: 40px; background:url(image/tab-on.jpg) no-repeat; margin: 50px auto; }
#menu ul{margin: 0 0 0 45px; padding: 0; font-weight: bold;}
#menu li{ float: left; width: 120px;}
#menu a {color: #004569; font-size: 0.7em; }
#menu a:hover, #menu .active {color: #da3a0a; }
#menu .active{font-size: 0.8em; text-decoration: underline; margin: 5px 0 0 0;}
.home {background:url(image/tab-on-home.jpg) no-repeat !important; }
.dove {background:url(image/tab-on-dove.jpg) no-repeat !important; }
.contatti {background:url(image/tab-on-contatti.jpg) no-repeat !important; }
.photo {background:url(image/tab-on-photo.jpg) no-repeat !important; }
<pre>
Abbiamo creato una lista all’interno di un div che richiama un id e una classe.
L’id ci serve per avere le dimensioni neccesarie alla visualizzazione del menu e per avere come base l’immagine senza active.
La classe la utilizzaremo solo se ci troviamo in una delle pagine del nostro menu, per avere l’active sul link della pagina.
In questo caso abbiamo creato 4 classi per le nostre 4 pagine/links.
Per ciascuna delle 4 classi richiamiamo l’immagine corrispondente utilizzando !important per forzare la visualizzazione dell’immagine che andrà a sostituire quella richiamata dall’id #menu.
La lista invece è una normale lista senza list-style e con float: left per mettere gli li in linea.
Non è stato molto difficile, vero? Voi cosa ne pensate?
Quì trovate il download di tutti file utilizzati e pronti per l’uso.
2 Comments
Leave a comment
News in anteprima
- La vacanza da cani
Se è vero che il sito web è diventato il primo business per le aziende, il settore alberghiero ne è ... - Non utilizzi Windows? Chiedi il rimborso!
Per tutti coloro che lo volessero da oggi è possibile richiedere il rimborso per la spesa sostenuta nell'acquisto di un ... - Lo shopping arriva su twitter
Twitter metterà a disposizione delle aziende uno strumento per promuovere offerte. Si chiama @earlybird è gli utenti in ...
Ultimi Articoli di Tutorial
-
WordPress: aggiungere una sidebar per i widget
Come promesso nel post precedente, oggi inizio una nuova rubrica dedicata interamente a Wordpress. Vedremo di volta in volta come ... -
Realizzare un layout Minimal in Photoshop
E' il momento di un altro tutorial PSD. Oggi vediamo come realizzare il templete di un sito in Photoshop. Tra ...
Ultimi Articoli di Showcase
-
10 Siti internet Luxury Hotel
Nel post di questa settimana voglio condividere con voi 10 siti internet Luxury Hotel che ho trovato navigando sul web ... -
Web marketing che forza
Quanto è importante il marketing e il web marketing per promuovere un'attività? Domanda retorica ovviamente! E' fondamentale, ma quanto può ...
Articolo interessante
Grazie! Mi fa piacere che ti sia piaciuto.