Blog trasferito su
www.NoizExperience.com

20 giugno, 2008

Come realizzare un Menu Orizzontale




Menù con javascript e css

Volevo riproporre un vecchio post in occassione del nuovo menù. Per realizzarlo, infatti, mi sono affidato a questo script, e quindi volevo riproporlo per analizzarlo nuovamente in maniera più semplice e più chiara, proprio per dimostrare quanto sia semplice il suo utilizzo. Con poche righe di codice possiamo inserire un menu semplice, leggero e graficamente piacevole.
Premetto che su Blogger ho riscontrato alcuni problemi per l'installazione, probabilmente dovuti ad un javascript che va inserito sul tag body, e quindi in tal caso dovrete ricorrere, come ho fatto io, a caricare il menu su uno spazio web esterno. Per le altre piattaforme non ci dovrebbe essere nessun tipo di problema.

Scarica i file e caricali sul tuo spazio web.

Apri il tuo Photoshop e crea lo sfondo per ogni voce del menu. Ricorda che ogni sfondo deve avere la stessa dimensione degli altri, e possibilmente deve essere uguale graficamente, magari cambia solo il colore ed eventualmente l'icona. Io per esempio ho cambiato solo il colore dello sfondo, e l'angolo laterale delle voci finali, così da dare un'effetto arrottondato.

Ora inserisci questo codice prima del tag </head>:
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>


Inserisci questo codice onload="slideMenu.build('sm',200,10,10,1)" all'interno de tag body, come nell'esempio:
<body onload="slideMenu.build('sm',200,10,10,1)">

Dopo il tag <body> inserisci nel punto in cui vuoi che compaia questo codice:
<ul id="sm" class="sm">
<li style="background:url('tuosfondo01.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Home</a></li>
<li style="background:url('tuosfondo02.jpg')">
<a href="mailto:tuaemail@email.com" title="inserisci la descrizione">Email</a></li>
<li style="background:url('tuosfondo03.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu03</a></li>
<li style="background:url('tuosfondo05.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu04</a></li>
<li style="background:url('tuosfondo04.jpg')">
<a href="tuourl.html" title="inserisci la descrizione">Voce menu05</a></li>
</ul>


Ora analizza il tuo codice e personalizza: inserisci il link corretti delle immagini, cambia le voci, gli url, e sopratutto adatta il foglio di stile (il file che finisce .css) secondo le tue esigenze.

Nel caso in cui ti accontenti di qualcosa di semplice, ho realizzato un menu da poter riutilizzare semplicemente cambiando gli url. Scarica e utilizza liberamente.

Se hai bisogno di una mano non esitare a chiedere aiuto.


Articoli correlati per categorie



5 commenti!:

notoriousxl ha detto...

Bell'articolo! ;-)
Non sarebbe più accessibile, se l'area cliccabile si estendesse per tutta l'area del tab? (rendendo, ad esempio, il tag a un elemento di blocco). ;-)

Angelo ha detto...

ciao notoriusxl (immagino il nick sia riferito a Biggy?) si hai ragione, ci lavorerò sopra.. grazie! a presto!

notoriousxl ha detto...

@angelo: no, "notorious" è come mi chiamavano all'Università (non chiedermi il perché) XD, mentre la "xl" serve ad avere un nickname unico nei vari servizi online! ;-)

Angelo ha detto...

Ahah! Capittt.. avevo pensato a biggy, perchè si chiamava "notorius" ed "xl" da extra-large perchè era grassisimo.. Ok! ;D

notoriousxl ha detto...

Ti assicuro che sono sì alto, ma tutto tranne XL, essendo svariati chili sottopeso (nonostante le quantità semi-industriali di cibo che ingerisco) :-P