Megamenù dropdown con più colonne senza javascript per Blogger.

Un menù orizzontale a tendina per Blogger con elementi secondari su più colonne e senza utilizzare javascript.ma solo CSS3.

Riprendo con la serie di articoli dedicate ai menu che tanto successo hanno avuto tra i lettori più affezionati di questo blog. Il menù che presento oggi è particolare perché non ha bisogno di alcun javascript e si può installare senza modificare il modello ma solo incollando il codice in un elemento pagina HTML/Javascript nella sezione Layout della Bacheca di Blogger.

Viene usato il linguaggio CSS3 che come noto non viene ancora ben supportato dai browser di casa Microsoft. Questo non vuole dire che il menù non sarà visto da chi utilizza Internet Explorer ma solo che il suo aspetto non sarà perfetto come invece accadrà per Chrome, Firefox, Safari e Opera.

L'autore di questo menù è NetTuts+ a cui si può sempre fare riferimento se si vogliono modificare parametri o impostazioni.

Sotto a ciascuna voce principale possono essere inseriti dei sottomenù da 1 a 5 colonne in cui mostrare link, testo formattato, elenchi e anche immagini. Come mio solito ho anche postato una demo

L'installazione non presenta alcun problema. Si va su Layout > Aggiungi un gadget > HTML/Javascript, non si mette il titolo e si incolla il codice seguente

<div id="menu">
<li><a href="#" class="drop">Home</a><!-- Inizio elemento Home -->
<div class="dropdown_2columns"><!-- Contenitore 2 colonne inizio -->
<div class="col_2">
<h3>Benvenuto!</h3>
</div>
<div class="col_2">
<p>Ciao e benvenuto ! Questa è una dimostrazione delle possibilità Mega Drop Down Menu.</p>            
<p>In questo elemento possono essere inseriti una vasta gamma di stili tipografici quali elenchi, titoli, ecc.</p>            
</div>
<div class="col_2">
<h4>Browser supportati</h4>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YTkJvDm81CJ8FSgzn88-baa1r8FDRWtruyZIK8ZAgLzVbVetEXI8mdi86vyERyKxhiRAVqqXE73gfy1GwQ-WB5GgdHPbPtluSnvBYFb0p4aCgqJOurfH6OnAw7qnGcX1pvRl7wJqkjUC/s125/browsers-supportati.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Questo menu è stato testato su tutti i maggiori browser.</p>
</div>
</div><!-- Fine del container a 2 colonne -->
</li><!-- Fine elemento Home -->
<li><a href="#" class="drop">5 Colonne</a><!-- Inizio Elemento a 5 colonne -->
<div class="dropdown_5columns"><!-- Inizio container a 5 colonne-->
<div class="col_5">
<h3>Questo è un esempio di un container molto largo a 5 colonne</h3>
</div>
<div class="col_1">
<p class="black_box">Questo è un box di testo grigio scuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>
</div>
<div class="col_1">
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>
</div>
<div class="col_1">
<p class="italic">Questo è una porzione di testo in corsivo. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>
</div>
<div class="col_1">
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>
</div>
<div class="col_1">
<p class="strong">Questa è una porzione di testo in grassetto. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>
</div>
<div class="col_5">
<h3>Qui sono presenti dei contenuti con immagini</h3>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1KuBAEXJ7gUJmE0hcLAqp8NFzb77nQvf6lC5j7HcyBjp-FgItNilVkRpeCHDqgKA4YCyDbecHnxASNCziJ19d5UDb5I2rMrtOu_BWKmoACvwN_MZRz_lCfsVQWO64NMcf0esuO3g3Dgh/s70/megamenu-immagine.jpg" width="70" height="70" class="img_left imgshadow" alt="nome-immagine" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzVPTk7qELeIANdWsdxUHZe_g3AUOqV5_mc_7WnoVv4_Z4_WbbBB5MR2AbCNgP2oGmi-_WJlo12SL_GmhuAZDealUX-bMJ-bGRvUMhigC26BXn_pjfBSpJu8naHwIpNfSUQAzKZcf_YfK/s70/immagine-megamenu.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>
</div>
<div class="col_2">
<p class="black_box">Questo è un box scuro che può servire per evidenzaire alcuni contenuti. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>
</div>
</div><!-- Fine del container a 5 colonne -->
</li><!-- Fine elemento a 5 colonne -->
<li><a href="#" class="drop">4 Colonne</a><!-- Inizio elemento a 4 colonne -->
<div class="dropdown_4columns"><!-- Inizio container a 4 colonne -->
<div class="col_4">
<h3>Questo è il titolo</h3>
</div>
<div class="col_1">
<h4>Alcuni Link</h4>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Mappa sito</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Video tutorial</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Link Utili</h4>
<ul>
<li><a href="#">Guide</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Modulo contatto</a></li>
<li><a href="#">Foto</a></li>
<li><a href="#">Musica</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Materiale vario</h4>
<ul>
<li><a href="#">Ricette</a></li>
<li><a href="#">Creatività</a></li>
<li><a href="#">Guest post</a></li>
<li><a href="#">Applicazioni</a></li>
<li><a href="#">Portfolio</a></li>
</ul>  
</div>
<div class="col_1">
<h4>Miscellanea</h4>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustrazioni</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
</div><!-- Fine del container a 4 colonne -->
</li><!-- Fine elemento a 4 colonne -->
<li class="menu_right"><a href="#" class="drop">1 Colonna</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Lindedin</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Pagina Brand</a></li>
<li><a href="#">Pagina Fan</a></li>
<li><a href="#">Tumblr</a></li>
<li><a href="#">FriendFeed</a></li>
<li><a href="#">MySpace</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Illustrazioni</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">3 Colonne</a><!-- Inizio Elemento a 3 Colonne -->
<div class="dropdown_3columns align_right"><!-- Inizio Container a 3 Colonne -->
<div class="col_3">
<h3>Elenchi nei box</h3>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Linkedin</a></li>
</ul>  
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Forum</a></li>
<li><a href="#">Mappa sito</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Portfolio</a></li>
</ul>  
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustrazione</a></li>
<li><a href="#">Altro...</a></li>
</ul>  
</div>
<div class="col_3">
<h3>Esempi di immagini inserite</h3>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzVPTk7qELeIANdWsdxUHZe_g3AUOqV5_mc_7WnoVv4_Z4_WbbBB5MR2AbCNgP2oGmi-_WJlo12SL_GmhuAZDealUX-bMJ-bGRvUMhigC26BXn_pjfBSpJu8naHwIpNfSUQAzKZcf_YfK/s70/immagine-megamenu.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Leggi tutto...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1KuBAEXJ7gUJmE0hcLAqp8NFzb77nQvf6lC5j7HcyBjp-FgItNilVkRpeCHDqgKA4YCyDbecHnxASNCziJ19d5UDb5I2rMrtOu_BWKmoACvwN_MZRz_lCfsVQWO64NMcf0esuO3g3Dgh/s70/megamenu-immagine.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Leggi tutto...</a></p>
</div>
</div><!-- Fine del container a 3 colonne -->
</li><!-- End 3 columns Item -->
</div>
<style type="text/css">
body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
/* Barra di Navigazione */
#menu {
list-style:none;
width:800px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Sfondi e gradienti */
background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
/* Bordi arrotondati non visibili con IE */
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
/* Sfondi e gradienti degli elementi puntati con il cursore */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjg47ECC8i3OovLYfXTc7yhPpYS0EDrfkvSCnqmrvJPdnNs7-RhUd5ZcGtkVlY3xb9wzs4jdUWiYMWObtyyaHU8BLUOOAFFmnc6SC8e5FmRfSvNEf-Msrt6Co5CzIhkliQ8vQYmzZ-jY2/s12/arrow-down.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjg47ECC8i3OovLYfXTc7yhPpYS0EDrfkvSCnqmrvJPdnNs7-RhUd5ZcGtkVlY3xb9wzs4jdUWiYMWObtyyaHU8BLUOOAFFmnc6SC8e5FmRfSvNEf-Msrt6Co5CzIhkliQ8vQYmzZ-jY2/s12/arrow-down.png") no-repeat right 7px;
}
/* Elementi del menu */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute !important;
left:-999em; /* Per nascondere la discesa */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradiente dello sfondo */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index:999999 !important;
top:auto;
}
/* Colonne */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
/* Allineamento a destra */
#menu .menu_right {
float:right !important;
margin-right:0px;
}
#menu li .align_right {
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
/* Stili dei contenuti del menu */
#menu p, #menu h3, #menu h4, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h3 {
font-size:21px;
font-weight:bold;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h4 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Immagini inserite a sinistra */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Ombreggiatura */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
/* Stile del box grigio */
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Angoli arrotondati non visibili con IE */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}
</style>

Si clicca su Salva, si posiziona l'elemento sotto l'intestazione del blog e si va nuovamente su Salva disposizione. Rispetto all'autore del menu ho cambiato il tag H2 con H3 in quanto in Blogger H2 è il tag della data e non può essere usato come titolo. Conseguentemente ho sostituito il tag H3 con H4. Le personalizzazioni sono infinite. Ho inserito dei commenti, che si riconoscono perché sono compresi tra i caratteri /* e */ o tra <!-- e -->, che spiegano il significato dei tag più importanti.

La larghezza della demo è di 800 pixel che può essere modificata a seconda delle esigenze. I contenuti delle singole voci vengono lasciate alla libera fantasia. Ci sono esempi di come mettere box in evidenza, testo formattato, immagini e elenchi. Al posto dei cancelletti ( # ) vanno ovviamente inseriti gli URL dei post, delle pagine o di link esterni a cui collegare ciascuna voce del menù. Sono state anche settate le larghezze degli elementi con 1, 2, 3, 4 o 5 colonne rispettivamente a 140, 280, 420, 560 e 700 pixel. Tali numeri possono essere modificati contestualmente agli altri che rappresentano le dimensioni interne.