CercaSoluzione3
In quanti ci chiediamo "Come faccio ad inserire un menu a Tendina Orizzontale?".
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://-'>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://-'>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://-'><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.
Postato sotto: 
7 commenti:
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à....
erroneamente ho scritto verticole, volevo dire verticale.
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
Ciao, io non sono esperta di HTML.... come facio a spostare il menu sotto al titolo del blog?
Grazie mille
Nel modo da te descritto si sovrappone alla NAVBAR che non voglio disattivare
Grazie per il codice.
Funziona beme con Google sia in Windows Vista che su Windows 8.
Saluti,
Salvatore
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!