Menu di navigazione a tendina con sottosezioni e campo ricerca


Menu di navigazione a tendina con sottosezioni e campo ricerca


Da HelpLogger abbiamo preso spunto per un nuovo menu a tendina dai bordi arrotondati con sottosezioni e campo aggiuntivo. Questo nuovo menu è realizzato interamente in CSS ed ha un risultato grafico più carino rispetto al precedente menu a tendina che utilizzavamo.

Ovviamente le personalizzazioni sono tante e per chi non volesse il campo di ricerca può eliminarlo come i nostri amici di ReggioByNight che abbiamo aiutato ad adattare il menu secondo le loro esigenze.

Per installare questo menu a tendina dobbiamo smanettare col codice del nostro template, ma nulla di complicato.

Accediamo a blogger e nel menu di sinistra andiamo alla voce "Modello". Scarichiamo una copia del modello per aver un backup utilissimo se il risultato finale non ci aggrada o peggio roviniamo tutto.

A questo punto clicchiamo su "Modifica HTML".

Cerchiamo all'interno del codice (Ctrl+f) la riga: <b:skin>...</b:skin>  e cliccandoci sopra si aprirà l'intero CSS del nostro modello.

Cerchiamo adesso la riga  ]]></b:skin>  e subito prima incolliamo il codice necessario al funzionamento del nostro menu..



/* Horizontal drop down menu revisiong by Imaniaci di Clo&amp;demk
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#000000; /* Background color */
border-radius: 10px;  
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
color:#ffffff;
}
.menu li:hover li a {
background:#000000;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ffffff;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:14px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
color:#ffffff;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
color:#ffffff; /* Colore Font */
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#ffffff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#000000; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
color:#ffffff;
display:block;
height:35px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
color: rgb(241, 234, 234);
display:block;
height:35px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ffffff;
text-decoration:none;
}
.menu li ul.sub li a.fly {
color: rgb(241, 234, 234);
/* Submenu Background Color */
background:#000000 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#ffffff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#515151 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat; color:#ffffff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
color:#ffffff;
background: #000000; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search { 
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(http://2.bp.blogspot.com/-vDyTcAWn58E/UWm0GuAgYII/AAAAAAAADQg/1MqJrXZSQ9A/s1600/searchBar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
/* End Horizontal drop down menu revisiong by Imaniaci di Clo&amp;demk
----------------------------------------------- */

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Copiamo tutto il codice colorato che vedete sopra, in rosso vi segnaliamo le modifiche principali. In particolare:


  1. width:100%; Qui stabiliamo la larghezza del menu. 100% indica che il menu si adatterà alla larghezza del blocco, in alternativa possiamo inserire in maniera fissata la larghezza indicando in px quanto la vogliamo. (Es. width:700px; ).
  2. background:#000000;  
    Indica il colore di sfondo del menu, in questo caso è nero, ma possiamo inserire qualsiasi colore in formato esadecimale. Tabella esempio codici esadecimali.
  3. font-size:14px; 
    Indica la grandezza del font del carattere, in questo caso 14px.
  4. color:#ffffff;
    Il colore del testo del titolo del menu. Essendo lo sfondo nero abbiamo pensato di inserire il colore del testo in bianco. Ovviamente possiamo sostituirlo con qualsiasi colore più ci aggrada.
  5. background:#000000; /* Submenu background color */
    Indica il colore di sfondo del sottomenu che può essere differente rispetto al colore iniziale.
  6. /* Submenu Background Color */
    background:#000000 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 
    Il secondo livello di sottomenu può avere un colore di sfondo differente e la freccetta che appare può essere cambiata con un'altra iconcina.
  7. /* Background on Mouseover */
    background:#515151 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif)
    Qui possiamo stabilire il colore di sfondo e della iconcina del sottomenu al passaggio del mouse (hover).
  8. background: #000000; /* Background Color of the Submenu */
    Il colore di sfondo del sottomenu
  9. width: 228px; /* Width of the Search Box */
    Possiamo anche modificare la larghezza del campo ricerca
  10. background: url(http://2.bp.blogspot.com/-vDyTcAWn58E/UWm0GuAgYII/AAAAAAAADQg/1MqJrXZSQ9A/s1600/searchBar.png) no-repeat;
    Possiamo anche modificare lo sfondo della casella di ricerca.

Clicchiamo su anteprima per apprendere le modifiche realizzate e se ci piacciono clicchiamo sul pulsante "Salva Modello". Per il colore del carattere nel sotto menu possiamo modificarlo successivamente nel codice HTML che vedremo a breve oppure modificando il colore nell'Heder, ma occhio che potrebbe cambiarmi il colore anche da altre parti..

/* Header
/* -------------- */

#navigation ul li a:link, #navigation ul li a:active, #navigation ul li a:visited {
margin:0; 
font:bold 1.08em Arial, Helvetica, sans-serif; color:#ffffff


Adesso inseriamo il menu nella nostra pagina. Sempre dal menu di sinistra di blogger spostiamo sulla voce "Layout". Clicchiamo su "Aggiungi Gadget" e scegliamo un widget HTML/Javascript.

Il codice da inserire è 

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form>
</li>


</ul>
</div>


Una volta inserito il codice va personalizzato in base alle nostre esigenze. Per eliminare il campo di ricerca basterà rimuovere la parte in verde. I menu sono semplici link html e la class='top' indica il sotto menu.

Se hai difficoltà o non ti regoli col codice non esitare a commentare o contattarci ti aiuteremo senza problemi nel limite dei nostri impegni.

Un menu di questo tipo completo e senza campo ricerca lo puoi trovare su Reggio By Night.

Per altre guide non dimenticare di consultare la nostra sezione:

SHARE

Clo&demk

Siamo due semplici ragazzi Clo e Demk abitiamo in diverse città, ma il PC e gli interessi comuni ci legano. Ci piace la musica e i video musicali, navigare nel vasto mare d'informazioni d'internet alla ricerca di nuove mete diverse e lontane e non ci spaventano gli ostacoli...(Continua).

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

29 commenti:

  1. ciao io ho provato a prendere il codice,ma quando faccio copia e incolla non mi da niente...come mai?
    grazie.

    RispondiElimina
  2. @Samantha Bagnato

    Riprova a selezionare il codice col mouse, tastro destro copia... può essere che non te l'abbia copiato col semplice ctrl+c immagino..

    Non c'è alcuna restrizione...

    RispondiElimina
  3. Perchè a me se il gadget sta a lato si aprono i sottomenu mentre se sta in alto no??

    RispondiElimina
  4. @Anonimo

    Posizionalo sopra il corpo del post...stesso risultato?

    RispondiElimina
  5. @Demk scusami ma non ho capito non sono molto esperto ..

    RispondiElimina
  6. la posizione del gadget...

    Guarda l'immagine
    Apri immagine

    la posizione 1 dovrebbe essere la migliore... anche la 2 potrebbe andar bene...

    RispondiElimina
  7. @Demk il menu funziona da tutte le parti tranne che sopra o sotto il titolo del blog come mai

    RispondiElimina
  8. @Demk è proprio la posizione 1 che a me serve e che non va

    RispondiElimina
  9. @Anonimo

    Qualche incompatibilità con qualche tag CSS già presente nel tuo modello... se me lo invii tramite la sezione contatti possiamo cercare di risolverlo assieme =)

    RispondiElimina
  10. ciao ho provato in tutti e due i modi (ctrl+c e copia tasto destro) ma niente non incolla.
    Uffa non mi piace il nuovo sistema uff.
    grazie in anticipo.

    RispondiElimina
  11. @Demk niente , ho creato un nuovo blog per verificare se c'era qualche incompatibilità ma niente , stesso identico problema c'e' qualcosa che non va

    RispondiElimina
  12. @Samantha Bagnato

    Non saprei cosa dirti, ecco i codici da scaricare anche...

    Css menu orizzontale

    Html menu orizzontale

    @Anonimo
    Se ci contatti tramite l'apposita sezione contatti sarò felice di aiutarti parallelamente a risolvere il problema... questo menu l'ho inserito in altro blog senza grossi problemi..

    RispondiElimina
  13. @Demk vi ho contattati , comunque ho risolto il menu andava in conflitto con un banner pubblicitario

    RispondiElimina
  14. @Demk ho scritto a nome di danilo potresti rispondere appena puoi grazie !

    RispondiElimina
  15. ciao ho inserito il nuovo menu che mi hai consigliato solo che alla voce title 2 - 3 -4 -5 non viene visuallizzato il sottomenu contattami trramite link http://camelot.forumfree.it/?act=Profile&MID=10033414
    Ti rigrazio a presto

    RispondiElimina
  16. ciao demk,
    ti do libero accesso come amministratore nel forum cosi puoi aiutarmi nell impostare il menu http://forumtest2.forumfree.it/ grazie della tua disponibilità

    RispondiElimina
  17. @Antonio1

    Visto.... non era inserito il css, l'ho messo ma non va lo stesso, non si attivano le sottosezioni.

    Sai se forumfree che usi ha restrizioni sul codice?

    RispondiElimina
  18. Ciao, anche a me non si aprono i sottomenù... ho provato a cambiare disposizione, come suggerivate in un post del 27 aprile, ed effettivamente in quel caso vengono visualizzati i vari sottomenù, però avrei bisogno di tenere il menù sotto l'header, mentre ora funziona solo sotto lo spazio dedicato ai post, soluzione che non posso adottare...

    Se potete darmi una mano, vi ringrazio sin da subito
    Paolo

    RispondiElimina
  19. carissimo Demk, i tuoi menu mi piacciono da morire e cerco di realizzarli tutti anche se sui miei blog ho usato solo il menu a tendina a comparsa con sottosezioni.Vedi(universonokia.blogspot.it) Questo mi piace molto e il codice html che va nel :widget HTML/Javascript, io lo metto dentro al codice HTML del template perchè altrimenti non scendono le tendine dei sottomenu. Ma ho un problema, non riesco a centrare il menu, mi sta dalla pare sinistra della homepage. Puoi aiutarmi per favore e dirmi come posso centrarlo?? Grazie infinite, e sempre complimenti per il vostro lavoro.

    RispondiElimina
  20. PS: Fatto trovato il problema, ora menu centrato. Grazie.

    RispondiElimina
  21. @Gabriel

    Mi fa piacere che i menu ti piacciano. Se hai problemi chiedi pure... questa volta hai risolto da solo, ma appena posso rispondo a tutti...

    In generale ricorda che per posizionare al centro un elemento al centro ti basta inserirlo all'interno di un tag center....
    Es. <center>Ciao</center>.

    Complimenti per il blog, non ho più un nokia da anni, ma son sempre i migliori....

    RispondiElimina
  22. Ciao Demk, i miei complimenti per lo splendido ed utilissimo post che hai realizzato. Ho però un problema nella sua visualizzazione. Ho letto la risposta che hai dato ad Anonimo e mi sono infatti accorto che se il blocco html/javascript lo metto in posizione 2 lo vedo mentre se lo metto in posizione 1 non c'è nulla da fare....avresti per favore qualche idea e suggerimento da darmi?

    RispondiElimina
  23. @Fabio Pozzolitto
    Ciao Fabio, Grazie mille per i complimenti sono sempre ben graditi!

    Alcuni hanno risolto controllando l'incompatibilità con un banner pubblicitario, se ne hai prova a rimuoverli e vedere.

    Purtroppo se non va nella posizione 1 dipende dal css del template e quindi la soluzione va trovata caso per caso. Cerca come si chiama il blocco div della posizione 1 e per quel tag css dai i stessi parametri del menu. Se vuoi possiamo provare assieme, ma in questi giorni sono poco presente e quasi sempre da smartphone (quindi poco utile)....

    RispondiElimina
  24. Ciao Demk....torno a chiederti una cosa su questo interessante post....ho provato a cambiare il colore di sfondo alla barra mettendo lo stesso colore dello sfondo del blog ma, in cima al menù compare una fastidiosa linea tratteggiata...sapresti dirmi a cosa è dovuta e come rimuoverla??
    Grazie mille per l'aiuto e auguri di Buon Natale

    RispondiElimina
  25. @Fabrizio
    Tanti auguri di buone feste e scusa la tarda risposta. Ti capita con Internet Explorer o con altri Browser? Può essere un'immagine di sfondo che hai o il fatto che c'è una piccola differenza di colore... mi linkeresti il sito dove hai inserito il menu?

    Grazie ed a presto!

    RispondiElimina
  26. Ciao a me funziona tutto solo che il testo nei sotto menù è centrato mentre io lo vorrei allineare a sinistra. Come posso fare?

    RispondiElimina
  27. Ok ho allineato a sinistra da me. Ma adesso vorrei che le tendine scendessero al click del mause, non al semplice passaggio. Esiste un modo?

    RispondiElimina
    Risposte
    1. Ciao Luther,
      Al momento è settato su Hover (passaggio del mouse), non so se ti basta sostituire hover con 'active'. Appena sono da pc provo e ti faccio sapere...

      Bello come si vede adesso sul tuo blog. Cerca di completare tutto il menu o rimuovere le parti che non ti servono...ancora sotto Racconti la sottovoce non è inserito l'url

      Elimina

Senza di te questo blog si riduce a ben poco...
Per info guida commenti blogger