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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7_9ZHa83bSEIlvmGvjK3zh57VtQf3piAYio1Yk8IoBwE32raWYB7ykpgJQClztyg1U7bV9HPENx4fzwleJpd_LTjqRobChkzL62zSqFuOVgG7Winotru-j8CFYrMqtYOypzDoGf3aBA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7_9ZHa83bSEIlvmGvjK3zh57VtQf3piAYio1Yk8IoBwE32raWYB7ykpgJQClztyg1U7bV9HPENx4fzwleJpd_LTjqRobChkzL62zSqFuOVgG7Winotru-j8CFYrMqtYOypzDoGf3aBA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvlR24b-SJFGZdo33T_nGR8E9j4Np1JcA63695nqlhlOdVdY4To2MsRNZMq-cHqC33u2YyRBaloBtk_W9djnDhiB67Ic2CyYSHYoJbw2_hqqflkNJAA7HvLogj9jHtJdaOA6ElkutbUQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7_9ZHa83bSEIlvmGvjK3zh57VtQf3piAYio1Yk8IoBwE32raWYB7ykpgJQClztyg1U7bV9HPENx4fzwleJpd_LTjqRobChkzL62zSqFuOVgG7Winotru-j8CFYrMqtYOypzDoGf3aBA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7_9ZHa83bSEIlvmGvjK3zh57VtQf3piAYio1Yk8IoBwE32raWYB7ykpgJQClztyg1U7bV9HPENx4fzwleJpd_LTjqRobChkzL62zSqFuOVgG7Winotru-j8CFYrMqtYOypzDoGf3aBA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvlR24b-SJFGZdo33T_nGR8E9j4Np1JcA63695nqlhlOdVdY4To2MsRNZMq-cHqC33u2YyRBaloBtk_W9djnDhiB67Ic2CyYSHYoJbw2_hqqflkNJAA7HvLogj9jHtJdaOA6ElkutbUQ/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:

..guide blogger..

SHARE SHARE 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).

• 
• 
• 
• 
•