RSS Feed Seguiteci su Twitter! Seguiteci su Facebook!
NEWS: Questo Blog e' rimasto inattivo per più di 18 mesi , quindi possono esserci link non funzionanti o altre problematiche dovute alla mancata manutenzione. Cosa vi piace o non in questo BLOG?, scrivete tutte le vostre recensioni in questa area commenti, provvederemo immediatamente a cancellare il Blog o migliorarlo nelle sue aspettative. Grazie.

Menu a tendina Orizzontale

In quanti ci chiediamo "Come faccio ad inserire un menu a Tendina Orizzontale?".

Qui vi posto un menu già fatto solamente che bisogna fare un paio di modifiche per aggiornarlo e modificarlo con i colori a vostro piacimento.
Il codice che andrò ad inserire e in formato HTML, quindi per inserirlo dentro il vostro blog andate su Design Modifica HTML, e Espandi i modelli widget (consiglio sempre di salvare una copia del vostro Template prima di modificare HTML).

Cercate il codice <head> e immediatamente sotto questo codice inserite:

<ul id='mymenu'>
<li><a href='http://-'><strong>Home</strong></a></li>
<li><a href='http://-'><strong>Informatica</strong></a><ul>
<li><a href='http://-'>Pc</a></li>
<li><a href='http://-'>Hardware</a></li>
<li><a href='http://-'>Software</a></li></ul></li>
<li><a href='http://-'><strong>Utility</strong></a><ul>
<li><a href='http://-'>Codici HTML</a></li>
<li><a href='http://-'>Codici CSS</a></li>
<li><a href='http://-'>Codici PHP</a></li></ul></li>
<li><a href='http://-'><strong>Giochi</strong></a><ul>
<li><a href='http://-'>Azione</a></li>
<li><a href='http://-'>Avventura</a></li>
<li><a href='http://-'>Strategia</a></li>
<li><a href='http://-'>Sparatutto</a></li></ul></li>
<li><a href='http://-'><strong>Calcio</strong></a></li>
<li><a href='http://-'><strong>Altro</strong></a><ul>
<li><a href='http://-'></a></li>
<li><a href='http://-'>Altro</a></li></ul></li>
<li><a href='http://-'><strong>Forum</strong></a></li>
<li><a href='http://-'><strong>Contact</strong></a></li>
</ul>
Sul rosso inserire il link da riferimento della pagina che dovete collegare.
Adesso dobbiamo abbellire un pò il nostro menu aggiungendo un foglio in stile CSS, quindi per chi non lo sa andiamo su Design Designer modelli Avanzato Aggiungi CSS.
Adesso sul foglio inseriamo questo codice:

}
ul#mymenu{
font: 70%/1.5 Verdena,Tahoma,sans-serif;
color: #FFFFFF;
background: #000000;
width:800px;
height:20px;
margin-left:7px;
margin-top:-17px;
line-height:26px;
}
ul#mymenu,ul#mymenu li,ul#mymenu ul,ul#mymenu ul li{
margin:0;
padding:0;
list-style-type:none
}
ul#mymenu a{
display:block;
padding: 0 15px;
text-decoration: none;
color: #FFFFFF;
}
ul#mymenu li{
float: left;
position: relative;
}
ul#mymenu li li{
float: none;
line-height: 22px;
width:200px;
display:block !important;
display: inline;
}
ul#mymenu ul{
position: absolute;
top: 25px;
left: -9999px;
width: 12em;
background: #000000;
color: #FFFFFF;
}
ul#mymenu ul{
padding: 7px 0;
border: 1px solid #000000;
width:200px;
}
ul#mymenu ul,ul#mymenu li li a{
background-color: #000000;
color: #FFFFFF;
}
ul#mymenu li:hover,ul#mymenu a:hover{
background-color: #ffffff;
color: #000000;
}
ul#mymenu li:hover ul,ul#mymenu li.sfhover ul{
left: -1px;z-index: 100;
}
Abbiamo ottenuto un menu in HTML/CSS basta andare a modificare alcuni parametri (segnati in verde) per abbellire il nostro menu con vari colori, dimensione dei testi....ecc....Fatto questo abbiamo finalmente ottenuto il Menu a Tendina Orizzontale.
N.B.: in testa al post ho segnato che dobbiamo inserire il menu sotto <head> posizionandolo sotto questo codice il menu si trova sopra l'intestazione del titolo blog, per chi conosce HTML può posizionare il menu in qualsiasi posto del blog.

7 commenti:

Franco Costanza ha detto...

ho eseguito il procedimento da te spiegato, però sul blog la barra del menù è visualizzata in verticole, perchè? Ciao e grazie per la tua disponibilità....

Franco Costanza ha detto...

erroneamente ho scritto verticole, volevo dire verticale.

CercaSoluzione3 ha detto...

Ciao Franco, sinceramente seguendo la procedura descritta qui sopra dovrebbe comparire un menu a tendina orizzontale, prova in questo modo quando ti trovi sul foglio di style HTML cerca la stringa ]]> e subito prima inserisci il codice CSS, salva modello e mi aggiorni comè andata...Ciao

Anna Maria De Riva ha detto...

Ciao, io non sono esperta di HTML.... come facio a spostare il menu sotto al titolo del blog?
Grazie mille

Anna Maria De Riva ha detto...

Nel modo da te descritto si sovrappone alla NAVBAR che non voglio disattivare

salvatore ha detto...

Grazie per il codice.
Funziona beme con Google sia in Windows Vista che su Windows 8.
Saluti,
Salvatore

miam ha detto...

salve mi chiamo marlon al momento provo a fare tutto ma nontrovo la stringa HTML cerca la stringa ]]> il menu a me mi appare in verticale .grazie mille

Posta un commento

Proponi un'idea, segnalaci un problema.

Entra a far parte di CS3, pubblica i tuoi articoli.

Scrivi un commento!