Menu orizzontale con sotto menu diviso in due colonne

L'esigenza di molti blogger è aver un buon menu con tendina che permetta ai visitatori di accedere ai contenuti del sito.

Abbiamo già visto in passato come creare un menu orizzontale a tendina ed una versione ancora più carina con campo ricerca integrata.

Entrambi i menu visti in precedenza sono realizzati in CSS, funzionano sia su blogger che in qualsiasi altro sito Web che supporti la possibilità di aggiungere del codice alle pagine. Questa volta ti propongo un menu sempre in CSS, sempre con le tendine a comparsa, ma ha una particolarità in più.

Il menu che vedremo assieme qui è tratto da HelpBlogger e ti permette di inserire un sotto menu a tendina con la particolare suddivisione a due colonne come puoi notare nell'immagine sottostante.

Questo menu è adatto a chi ha necessità di inserire tante sottosezioni e vuole evitare lunghe tendine. Qui sotto trovi un'anteprima, se ti piace a seguire ti spiegherò passo passo come inserire questo menu nel tuo blog...

Per prima cosa accedi a Blogger e dal menu di sinistra del tuo blog scegli la voce "Modello" e clicca sulla voce "Modifica HTML".
Più o meno come mostrato nell'immagine successiva:

All'interno del codice cerca la voce: <b:skin>...</b:skin>
Cliccaci sopra per espandere il codice HTML. Cerca (Ctrl+F) nel codice ]]> e subito prima incolla questo codice:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHHnGxsUNgEBbX1pKMtP99JlwiYgrm9lJCOsUwdIl2HO_GV5bBYirbOGj9EbYaE9RI9W-Oa4XnX45IfqpbAWZOwKliHEw9x2csUJsim1EUPSD7IoNEdZ82mG7xPO0utN-NoQI-GyDsRE/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Adesso cerca nel codice queste due righe:

/* Tabs
----------------------------------------------- */

E cancella tutto il codice che trovi sino a

/* Columns
----------------------------------------------- */

Al posto del codice eliminato incolla questo:

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

Dovresti così avere lo stesso codice che vedi nell'immagine seguente.

Clicca su "salva il Modello".
Le modifiche principali che puoi fare al CSS e che mi vengono in mente sono:

- Larghezza, di base è 940px indicato nel punto width:940px;, puoi modificarla in width:100% per sfruttare tutta la larghezza disponibile o altrimenti indicare tu stesso la larghezza;

- Il colore del sottomenu è #F1F1F1 una specie di grigio che possiamo cambiare con qualsiasi colore inserendo l'opportuno codice esadecimale;

- La freccettina per indicare la sottosezione è un'immagine, puoi cambiarla sostituendo questo link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAHHnGxsUNgEBbX1pKMtP99JlwiYgrm9lJCOsUwdIl2HO_GV5bBYirbOGj9EbYaE9RI9W-Oa4XnX45IfqpbAWZOwKliHEw9x2csUJsim1EUPSD7IoNEdZ82mG7xPO0utN-NoQI-GyDsRE/s1600/arrow_white.gif con quello relativo all'immagine che vuoi;

- Il colore di sfondo del menu è nero, per cambiarlo cerca la voce background:#000000; è cambia la parte in rosso col codice esadecimale del colore che preferisci.

Altre modifiche non me ne vengono in mente adesso, ma se hai bisogno non esitare a chiedere!

Adesso dal menu di sinistra scegli la voce "Layout" per accedere agli elementi della pagina. Qui clicca su "Aggiungi un gadget" e dall'elenco scegli l'elemento "HTML/Javascript" e dentro incolla il seguente codice:

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Adesso devi modificare il codice appena inserito in base alle tue esigente. Sicuramente inserisci i titoli che vuoi che appaiano e modifica i link.

Per qualsiasi dubbio o problema commenta pure...

...guide blogger..

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