-->

MENU' A TENDINA ORIZZONTALE

Per inserire un menù a tendina
orizzontale, cioè sotto il titolo del blog
con i link Home ... ecc ecc.
bisogna intervenire nei codici CSS.

Andate in Design -Layout- Modifica HTML
e inserite il codice css dopo la riga di
codice <b:skin><![CDATA[/*.

il codice è questo:

/*CSS per il menu*/
ul#nav{font: 12px Verdena,Tahoma,sans-serif; font-weight: bold;}
ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{margin:0;padding:0;list-style-type:none}
ul#nav{height:26px; line-height:25px; background: #2C2C2C; color: #FFFFFF;}
ul#nav a {display:block; padding: 0 15px; text-decoration: none; color: #FFFFFF;}
ul#nav li {float: left; position: relative;}
ul#nav li li {float: none; line-height: 22px; display:block !important;display: inline; /*IE*/}
ul#nav ul{position: absolute; top: 23px; left: -9999px; width: 12em;}
ul#nav ul {padding: 7px 0; border: 1px solid #AAAAAA;}
ul#nav li li a {height:22px} /*fix per IE */
ul#nav ul,ul#nav li li a {background-color: #2C2C2C; color: #FFFFFF;}
ul#nav li:hover,ul#nav a:hover{background-color: #AAAAAA; color: #000000;}
ul#nav li:hover ul,ul#nav li.sfhover ul{left: -1px;z-index: 100}


Post originale su: http://dreamworldgraphic.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives

Se nel vostro template avete delle variabili
tipo:
<variable name="textcolor"description="Text color"
Type="color" default="#ccc" value="#cccccc">

dovrete inserire il codice dopo la dichiarazione dell'ultima variabile

salvate il modello.

Andiamo ora ad intervenire sull'HTML

questo è un codice che ho preparato come esempio
le varie sezioni spetterà a voi cambiarle in base
alle vostre esigenze

<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profilo</a>
</li>
<li>
<a href="#">Grafica</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Chat</a></li>
</ul>
</li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">Tubes</a></li>
<li><a href="#">Pagine Utili</a></li>
<li><a href="#">Premi</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Banner</a></li>
</ul>
</li>
</ul>


Post originale su:http://dreamworldgraphic.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives



Il menù deve sempre iniziare con <ul id="nav"> e terminare con </ul>

Per le voci semplici come Home  e Profilo
basta scrivere

<li>
<a href="indirizzo">Home</a>
</li>

che dovrete personalizzare


Per ogni voce con menù a tendina
come le altre voci nel mio esempio
si deve scrivere
<li>
<a href="#">Grafica</a>
<ul>
<li><a href="indirizzo1">Tag</a></li>
<li><a href="indirizzo2">Scrap</a></li>
</ul>
</li>

Post originale su: http://dreamworldgraphicblog.blogspot.it/p/menu-tendina-orizzontale.html
Under Creative Commons License: Attribution Non-Commercial No Derivatives

Per quanto riguarda l'inserimento del codice HTML
basta andare nel Layout
Aggiungi Gadget
nella posizione sotto il titolo
e cercate il gadget HTML/Javascritp
incollate il codice e salvate.

ciao, alla prossima

Nessun commento: