immagin top

3.2.15

Blog design: menu a discesa semplice

3.2.15

Devo ammettere che effettivamente il codice del precedente menu 'drop down' non era molto semplice da modificare, così sono andata alla ricerca di un aiuto nella costruzione del famigerato menu a discesa!
simple dropdown menu Simona S.
Dopo aver finalmente trovato un codice semplice da personalizzare, ecco che Blogger come al solito mette i bastoni fra le ruote.

Come?
Il codice inserito nel gadget HTML/Javascript nell'area 'adibita' alle pagine, sforma tutto il menu! Probabilmente è anche per questo motivo che inserendolo nel post di presentazione il menu si vedeva corretamente, mentre una volta inserito nel gadget si deformava, senza nessuna possibilità di modificarlo in modo semplice ed immediato.

Premesso ciò, vi dico che il seguente codice, davvero facilissimo da personalizzare, è da inserire all'interno del codice HTML del vostro template!

Nessuna paura!!!
Ormai siete diventate bravissime ;)

Intanto vi presento il nuovo menu!
L'ho inserito nel blog demo dello slideshow per questione di comodità, soprattutto nel farvi vedere come effettivamente vien fuori inseirto nel modo corretto.... è il menu sotto il titolo del blog.

Arriviamo al codice.

Dopo essere entrate in Modifica HTML, cliccate all'interno del frame in cui si vedono i codici e premete CTRL+F per far apparire la finestrella di ricerca veloce.
All'interno del campo scrivete main-outer e cliccate invio.
Il risultato della ricerca evidenzierà in giallo il div main-outer, appunto.
Subito sopra incollate questo codice:
<div id='sct'>
<ul id='sct-nav'><li><a href='#'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li>
    Social
    <ul class='sct-sub-nav'>
      <li><a href='#'>facebook</a></li>
      <li><a href='#'>Instagram</a></li>
     </ul>
  </li>
  <li><a href='#'>Blog</a></li>
  <li><a href='#'>Contact</a></li>
</ul>
</div>
Passiamo ora agli stili, il CSS.
Andate in Personalizza > Avanzato > Aggiungi CSS. Nel campo vuoto inserisci il codice qui sotto:
#sct {
font-family: verdana;
padding: 20px 50px 50px;
font-size: 13px;
text-align: center;
background: transparent;
text-transform:uppercase;

}
ul#sct-nav {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul#sct-nav li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 7px 10px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul#sct-nav li:hover {
background: #B2E0E0;
color: #fff;
}
ul#sct-nav li a:hover, ul#sct-nav li ul li a {
color:#fff;
text-decoration:none;
}

ul#sct-nav li ul {
padding: 0;
position: absolute;
top: 32px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;z-index:10000;
}
ul#sct-nav li ul li {
background: #B2E0E0;
display: block;
color: #fff;
}

ul#sct-nav li ul li:hover {
background: #A0CACA;
}

ul#sct-nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

Ricordate che, quando un giorno vorrete modificarlo, lo troverete in Modifica HTML, alla fine di tutti i codici degli stili.
Se avete bisogno di saperne di più guardate questo mio tutorial!

Vediamo ora come personalizzare i colori, ma prima è importante che voi sappiate che per deformazione professionale, in quanto mamma, sento davvero il bisogno di svezzarvi, quindi prendete appunti perchè:
  • Il menu, in HTML, si definisce ul
  • Gli elementi della lista, si definiscono li
  • Il link è definito dal tag a, e quando il mouse passa sopra il link in HTML si difenisce :hover
  • Il colore dello sfondo si modifica cambiando il valore corrispondente alla voce background:
  • Un menu, ul, inserito all'interno del tag della lista, li, indica che siamo in presenza di un sottomenu
  • Sostituisci il simbolo # con l'URL della pagina che vuoi linkare
  • Il tipo di font si è dato dal nome della sua famiglia, ovvero font-family:
  • Il colore del font si modifica cambiando il codice del colore alla voce color:
  • width = larghezza ... height = altezza

Detto ciò, non vi sembra più chiaro il codice che vi ho fornito?
Allora, adesso sapete dove andare a mettere mano per modificare il menu.
Non sapete dove prendere il codice del colore????
Eccoti un paio di links ;)
Se doveste avere problemi, dubbi o gridare semplicemente 'Yeeeeeeeeee ce l'ho fatta!!!!'.... lasciate pure un commento ;)

42 commenti:

  1. io ho un problema, ho fatto così come hai detto ma non viene :( mi rimane tipo elenco.. di lato :(

    RispondiElimina
    Risposte
    1. Accidenti... -.-
      Il codice è esattamente quello che ho inserito io nel blog demo... riesci a farmi vedere ciò che hai fatto?

      Elimina
    2. sono andata nell'html, appena sopra il "div class='main-outer'" ho messo il codice che hai messo su, poi sono andata in css e ho copiato l'altro modificando solo lo sfondo. Ma non va uhmm

      Elimina
    3. non riesci a farmi vedere? perchè così non riesco a capire....

      Elimina
    4. Ok ho smanettato un attimo e ora VA!! ^_^ Grazie mille per il codice ^_^

      Elimina
    5. Mi fa piacere ^_^ Ti è venuto proprio bella la grafica del blog :D
      Bravissima!!!

      Elimina
  2. Io in questi mesi ho fatto solo danni al mio blog, quindi per il momento non me la sento di metterci mano :D
    Però ecco, il menù a discesa è l'unica modifica che vorrei apportare prima di incatenarmi le mani. Non ho capito però se: il menù viene generato da zero, oppure va a modificare il menù pagine già esistente. Parlo arabo, I know ._.

    RispondiElimina
    Risposte
    1. questo proposto è un menu che viene generato da noi...il menu delle pagine di Blogger ancora non è ai livelli di sottomenu e compagnia bella :)

      Elimina
    2. In effetti sarebbe comodo che Blogger implementasse la possibilità dei sottomenu... ma per fortuna c'è Simo! :D

      Elimina
  3. Post assolutamente utile, me lo segno e me lo studio con calma.
    Grazie per le spiegazioni!!
    Daniela

    RispondiElimina
  4. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  5. Ciao! Grazie per le dritte, incredibilmente sono riuscita a installare anche io, frana in informatica, il menu e a personalizzarlo. :-) Non ho capito solo una cosa: come faccio a collegare le varie voci/categorie a determinati post?
    Grazie mille ancora e complimenti per il tuo utilissimo blog!
    Chiara

    RispondiElimina
    Risposte
    1. Mi spiego meglio: vorrei inserire il link a una serie di pagine.
      Ho visto che sostituendo # nel codice html mi crea un link che rimanda a una sola pagina. Come faccio a far sì che mi rimandi a una serie di pagine (per esempio che trattano dello stesso argomento)?
      Ri-grazie :-)

      Elimina
    2. Ciao Chiara, sì ho capito, intendi dire collegare il link ad una categoria che racchiude una serie di post.
      Allora segui questo mio tutorial, ovviamente seguilo per capire come prendere l'URL edlla categoria, e poi inserirsci il link al post del cancelletto ;)
      Creare una pagina per categoria

      Elimina
    3. Grazie!!! Hai fatto il miracolo :3

      Elimina
  6. I tuoi codici sono sempre interessanti e li spieghi sempre in maniera sempplice :)
    E io finalmente mi sono iscritta alla tua mailing list così non perderò più un post ;)
    Un abbraccio.

    Nicoletta
    thewhitepeppermint.blogspot.it

    RispondiElimina
    Risposte
    1. Grazie mille Nicoletta!!!
      Spero di riprendere a pieno ritmo al più presto...anche per la mailing list!!! :(

      Elimina
  7. Ciao Simona, abbiamo appena scoperto il tuo blog e sicuramente torneremo per studiare questi preziosi consigli "tecnici" ma soprattutto per vedere tutte le tue meravigliose creazioni! Complimenti!

    RispondiElimina
  8. ma il tuo blog oltre che essere meraviglioso è un'officina di idee meravigliose*-* grazie per aituare noi poveri mortali di internet come me che sono un po' ciompi con queste cose :* mi sono unita i tuoi follower, se ti fa piacere iscriviti al mio blog :* http://tersicoreinbeautyland.blogspot.it/

    RispondiElimina
  9. Grazie, funziona perfettamente e lo adoro :)

    RispondiElimina
  10. ciao... il codice è fantastico come sempre... ma vorrei aumentare la grandezza del font, solo che se modifico font-size non mi cambia la grandezza del carattere ma aumenta lo spazio tra il logo e la riga con tutte le pagine (menu) .. come posso fare per aumentare solo il font ????

    RispondiElimina
    Risposte
    1. Ciao Consuelo! Hai provato ad aumentare il font-size del primo blocco #sct?

      Elimina
  11. Ma perché nemmeno con la tua guida molto semplice e spiegata così bene non riesco a modificare il colore del mio menù!!!! Che rabbia!!!!

    RispondiElimina
    Risposte
    1. ciao! Se vuoi cambiare colore all'intera barra del tuo menu devi modificare il background di #navigation....ad esempio...
      se vuoi farlo dello stesso colore di sfondo del simbolo di ricerca devi cambiare:
      background:#fff ....con.... background:#FD707A
      Presto risponderò anche alla tua email!!!!
      :*

      Elimina
  12. Ciao Simona!
    Innanzitutto complimenti, il tuo blog è meraviglioso :)
    Sono immersa nella creazione del mio primo blog e questo menu mi sembra perfetto, vorrei chiederti però due cose:
    1) Come faccio a cambiare il colore delle scritte del menu? Ho provato a sostituirlo in tutti i codici sia di background che di color ma le scritte "home", "about", "blog" e "contact" rimangono sempre azzurre...
    2) Il codice "background: #A0CACA;" da colore sia alle scritte del menu al passaggio del mouse che a quelle del menu a tendina.. è possibile dividere le due cose avendo così la libertà di farli diversi?

    Grazie in anticipo per la tua pazienza! :)

    RispondiElimina
    Risposte
    1. Ciao!
      Grazie per i tuoi complimenti ♥

      Dunque, ti rispondo per ordine:
      1. Per cambiare colore ai links del menu principale devi aggiungere:
      ul#sct-nav li a {color: # ..... ;}
      al posto dei puntini inserisci il codice del colore.

      2. Per cambiare colore al background che si attiva al passaggio del mouse devi modificare:
      ul#sct-nav li:hover e ul#sct-nav li ul li:hover
      Il primo per il menu principale, il secondo per il sottomenu.
      Quello che dici cambia solo il sottomenu...
      mentre #B2E0E0 è l'azzurrino...

      Se hai altri problemi scrivi pure qui ^_^

      Elimina
    2. Grazie mille!!!!
      Ho sbagliato il codice della seconda domanda, mi riferivo al "color" di questa parte:

      ul#sct-nav li a:hover, ul#sct-nav li ul li a {
      color:#fff;
      text-decoration:none;
      }

      che fa cambiare colore alla scritta del menu al passaggio del mouse e alle scritte del menu a tendina (senza il passaggio del mouse), è possibile mettere due colori diversi?

      Elimina
    3. Sì certo! Ti basta dividere i due codici:
      ul#sct-nav li a:hover {
      color:#fff;
      text-decoration:none;
      }
      ul#sct-nav li ul li a {
      color:#fff;
      text-decoration:none;
      }

      Elimina
  13. Ciao Simona, come sempre mi affido al tuo blog per fare modifiche al mio blog! ^_^
    Ho inserito questo menu, ma tra il menu e la slide sotto mi si crea molto spazio bianco. Come posso diminuirlo?

    Grazie mille!

    RispondiElimina
    Risposte
    1. Ciao Marika, grazie ^_^!!!
      Non riesco a visualizzare il blog...se lo stai lasciando in privato per apportare delle modifiche, potresti rimetterlo per un po' pubblico? giusto il tempo di dirti come fare...

      Elimina
  14. Ciao Simona, ti seguo da un po' e trovo i tuoi tutorial una figata pazzesca.
    Ho già usato i tuoi suggerimenti in diverse occasioni e stavo provando a creare il famoso menù a tendina.
    Seguendo questo tutorial alla lettera però non mi piace dove si vanno a posizionare le pagine. Se volessi farle salire e posizionarle sotto la descrizione del blog? Invece di main-aouter dove dovrei incollare i codici?
    Grazie mille!

    RispondiElimina
    Risposte
    1. Ho provato di nuovo ed ora le pagine sono in verticale invece che in orizzontale

      Elimina
    2. Ciao fabiola, scusasmi l'immenso ritardo... Se tu riuscissi a darmi il link al tuo blog, magari riusco a capire come mai succede questo ;)

      Elimina
    3. Ecco qua!
      http://lananapatch.blogspot.it/

      Elimina
    4. Allora devi incollare il primo codice subito sotto il tag di chiusura dell'header, ovvero </header> ...
      Prova e poi fammi sapere ;)

      Elimina
    5. Inizio settimana ci provo e ti farò sapere ;)

      Elimina