Menù su più livelli per Blogger e non solo.

Come installare un menu orizzontale su 3 livelli in una qualsiasi pagina web senza utilizzare il javascript ma solo il CSS.

Continuo nella presentazione di menù in stili diversi tra di loro per venire incontro alle esigenze dei blogger che pubblicano i loro contenuti su Blogger ma anche su altre piattaforme visto che il menù che vado a illustrare potrà essere inserito in qualsiasi pagina web.

Si tratta di un menù che utilizza solo il CSS e che potrà essere installato in un elemento pagina senza modificare il template oppure anche nel modello. In ogni caso prima di procedere è opportuno salvare il template per un eventuale ripristino. I colori del menù sono realizzati mediante delle immagini di sfondo create tramite base64, quindi possono essere modificati ma non sarà semplicissimo.

Incollando il codice in una semplice pagina web ecco come si presenterà

con ben tre livelli di elementi. Su Blogger si può andare su Layout > Aggiungi un gadget > Base >  HTML/Javascript e si incolla in Sezioni del sito. Se invece si preferisce incollarlo nel modello sotto la Navbar si va su Modello > Modifica HTML e si cerca la sezione della Navbar

 

Se si vuole visualizzare il menu sotto la Navbar si incolla al di sotto della sezione mentre se nel nostro modello la Navbar l'abbiamo nascosta allora si incolla subito sopra. Il codice è questo 

<style type="text/css">@charset 'UTF-8';
#menuallcss{padding:0;margin:0;border:0}
#menuallcss ul,#menuallcss li{list-style:none;margin:0;padding:0}
#menuallcss ul{position:relative;z-index:597}
#menuallcss ul li{float:left;min-height:1px;vertical-align:middle}
#menuallcss ul li.hover,#menuallcss ul li:hover{position:relative;z-index:599;cursor:default}
#menuallcss ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}
#menuallcss ul ul li{float:none}#menuallcss ul ul ul{top:0;left:100%}
#menuallcss ul li:hover > ul{visibility:visible}
#menuallcss ul ul{margin-top:0}
#menuallcss a{display:block;line-height:1em;text-decoration:none}
#menuallcss ul li.last ul{left:auto;right:0}
#menuallcss ul li.last ul ul{left:auto;right:99.5%}
#menuallcss:after,#menuallcss ul:after{content:'';display:block;clear:both}
#menuallcss{width:auto;font-family:Georgia;}
#menuallcss:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);background-color:#606a77;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4f5864),color-stop(1,#49515b));
background-image:-webkit-linear-gradient(top,#4f5864,#49515b);background-image:-moz-linear-gradient(top,#4f5864,#49515b);background-image:-o-linear-gradient(top,#4f5864,#49515b);background-image:linear-gradient(#4f5864,#49515b);-moz-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;-webkit-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;content:'';display:block;height:8px}
#menuallcss > ul{border-bottom:1px solid #252A30;border-top:1px solid #252A30;-moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);background-color:#566171;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);background-image:-moz-linear-gradient(top,#6e7d8f,#404854);background-image:-o-linear-gradient(top,#6e7d8f,#404854);background-image:linear-gradient(#6e7d8f,#404854);height:27px;padding:15px 15px 15px 5px}#menuallcss > ul > li{margin:0 10px}#menuallcss > ul > li.has-sub:hover > a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}
#menuallcss > ul > li:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);background-color:#e2e2e2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);background-image:-moz-linear-gradient(top,#fff,#c8c8c8);background-image:-o-linear-gradient(top,#fff,#c8c8c8);background-image:linear-gradient(#fff,#c8c8c8)}
#menuallcss > ul > li.active:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);background-color:#cb7b72;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);background-image:-o-linear-gradient(top,#f49b8e,#bd584d);background-image:linear-gradient(#f49b8e,#bd584d)}
#menuallcss ul a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);background-color:#c2c2c2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:linear-gradient(#f1f1f1,#a8a8a8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);color:#3c444d;font-size:12px;line-height:27px;padding:0 20px;position:relative;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.4)}#menuallcss ul ul{width:170px}
#menuallcss ul ul a{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;line-height:150%}
#menuallcss ul .active > a{color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.4);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);background-color:#c46a60;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);background-image:-moz-linear-gradient(top,#ef7260,#b04c41);background-image:-o-linear-gradient(top,#ef7260,#b04c41);background-image:linear-gradient(#ef7260,#b04c41)}
#menuallcss ul .has-sub{position:relative}
#menuallcss ul .has-sub ul{-moz-border-radius:0 3px 3px 3px;-webkit-border-radius:0 3px 3px 3px;border-radius:0 3px 3px 3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;background-color:#c3c3c3;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);background-image:-o-linear-gradient(top,#e9e9e9,#aaa);background-image:linear-gradient(#e9e9e9,#aaa);padding:3px 0}
#menuallcss ul .has-sub ul a{background:none;padding:8px 8px 8px 16px;border-bottom:1px solid transparent;text-align:left}
#menuallcss ul .has-sub ul .has-sub a:after{content:none}
#menuallcss ul .has-sub li:hover > a{border-bottom:1px solid #1D2024;color:#FFF;background-color:#55616f;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#56606f),color-stop(1,#3f4852));background-image:-webkit-linear-gradient(top,#56606f,#3f4852);background-image:-moz-linear-gradient(top,#56606f,#3f4852);background-image:-o-linear-gradient(top,#56606f,#3f4852);background-image:linear-gradient(#56606f,#3f4852);-moz-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;-webkit-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;position:relative;text-shadow:0 1px 0 rgba(0,0,0,0.4)}
#menuallcss ul .has-sub li:hover > a:after{border-left:0 none;background-color:#c35f54;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);background-image:-o-linear-gradient(top,#ea5f51,#a9463b);background-image:linear-gradient(#ea5f51,#a9463b);-moz-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;-webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;content:'';height:100%;width:6px;position:absolute;right:0;top:0}
#menuallcss ul .has-sub > a{padding-right:0}
#menuallcss ul .has-sub > a:after{content:'▼';border-left:1px solid rgba(100,100,100,0.2);color:#5D6A7A;-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.2);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.2);box-shadow:-1px 0 0 rgba(255,255,255,0.2);display:inline-block;font-size:9px;margin-left:5px;text-align:center;height:25px;width:24px;text-shadow:0 -1px 0 #101417}
#menuallcss ul .active > a:after{color:#FFF}
#menuallcss ul ul a{font-size:12px}
</style>
<!-- Personalizzare il menu -->
<div id="menuallcss">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Prodotti</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Prodotto 1</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Prodotto 2</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 3</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Accessori</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Accessorio 1</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Accessorio 2</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 3</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Software</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Software 1</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 3</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Software 2</span></a>
<ul>
<li><a href="#"><span>Sottomenu 1</span></a></li>
<li><a href="#"><span>Sottomenu 2</span></a></li>
<li><a href="#"><span>Sottomenu 3</span></a></li>
<li class="last"><a href="#"><span>Sottomenu 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>Note biografiche</span></a></li>
<li class="last"><a href="#"><span>Contattami</span></a></li>
</ul>
</div>

Il menù vero e proprio va realizzato modificando la parte di codice sotto il commento <!-- Personalizzare il menu -->. Gli URL dei vari link vanno inseriti al posto dei cancelletti (#). Evidenzio il fatto che l'ultimo elemento del menù ha la classe last che serve per questioni estetiche mentre le voci con i Sottomenù hanno la classe has-sub e la Homepage la classe active. Nel caso in cui incolliate il menù nel modello potrebbe non visualizzarsi correttamente la freccia verticale ▼ presente in content:'▼'. Eventualmente si può togliere e lasciare solo le virgolette o sostituire con un altro simbolo supportato dal template di Blogger.