Menù multilivello per versione mobile di Blogger con casella di ricerca.

Come installare su Blogger un Menù Multilivello (4 livelli o più) per la versione mobile che si visualizza solo se la pagina è aperta da dispositivo mobile con risoluzione inferiore a una data.

La realizzazione del menù è una delle operazioni più lunghe e noiose sia per gli utenti di Blogger, sia per quelli di Wordpress. È diventata ancora più stressante da quando è fondamentale la versione mobile del sito specie per gli utenti di Blogger.

Chi per il blogging utilizza la piattaforma di Google deve in definitiva scegliere tra queste soluzioni:

1. Utilizzare un modello Responsive scaricato da internet già fornito di Menù
2. Usare un modello Responsive e installare un menù Responsive per Blogger
3. Installare solo un menù per desktop con tag condizionali nascondendolo nel mobile
4. Installare due menù distinti, uno per il desktop e uno per il mobile, in modo da visualizzarli rispettivamente se aperti da computer o da dispositivo mobile.

In questo sito ho scelto l'ultima opzione che ritengo sia la migliore. In questo post vedremo come mostrare un menù multilivello solo nei dispositivi che abbiano una risoluzione inferiore a 768 pixel.  Ricordo che si possono creare dei vincoli per mostrare un contenuto in funzione della risoluzione e del dispositivo. La specificità di questo menù è che è multilivello con la possibilità di arrivare fino a 4 livelli di menù o anche di più. La soluzione può essere interessante per chi abbia un menù molto fornito su più livelli nella versione desktop e volesse riproporlo con una diversa grafica anche su mobile.

Inoltre questo menù ha anche una casella di ricerca che può essere una soluzione quando non ci siano nella versione mobile dei motori di ricerca ufficiali di Blogger o creati mediante Adsense. 

INSTALLAZIONE DEL MENÙ

Si va su Bacheca -> Tema -> Backup/Ripristino -> Scarica Tema per salvare il Tema nel caso in cui le modifiche non andassero a buon fine. En passant ricordo che Blogger ha modificato un paio di nomi delle schede della Bacheca sostituendo Modello con Tema e Personalizza con Customize.

Successivamente si va sempre su Tema -> Modifica HTML e si cerca la riga </head> quindi, subito sopra a questa, si incolla questo codice

<!-- Menù Responsive Multilivello Inizio -->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style>
.sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya input{padding:5px 10px;width:75%;margin:5px 0 0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya button{background-color:#F95B5B;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya button:hover{background:#1FE0C9}
#navitions{background-color:#242729;border-bottom:0px solid #F95B5B;box-shadow:0 1px 9px #666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px 2px 9px #F95B5B}.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:block}.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px; font-family:oswald; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu &gt; li &gt; a{font-size:105%;font-family:oswald}.sf-menu ul ul{top:0;left:100%}.sf-menu{float:left}.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul li:hover{background-color:#333}.sf-menu ul a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu ul ul li{background:#3C3C3C}.sf-menu li:hover &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows .sf-with-ul{padding-right:1em}.sf-arrows .sf-with-ul:after{content:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}.sf-arrows ul li &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#F95B5B;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Verdana,Geneva,sans-serif}.sf-menu li &gt; i:after{content:&#39;+&#39;;color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li i.active:after  {left: 4px;font-size: 26px;top: -8px;}
.sf-menu li &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
.sf-menu li &gt; i.active:after{content:&#39;-&#39;;font-size:36px;top:-14px}.sf-menu a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust: 100%;}
@media only screen and (max-width:320px){#searchnya input{width:67%}}
@media only screen and (max-width:768px) {
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#F95B5B;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:&quot;\f0c9&quot;;top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav &gt; li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover &gt; a.home,.sf-menu &gt; li &gt; a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}
}
</style>
<script type='text/javascript'>
//<![CDATA[
(function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" "+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return c.closest("."+p.menuClass)},o=function(c){return e(c).data("sf-options")};return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)})}return this},show:function(){var t=o(this);if(!t){return this}var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return this},destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" "+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}var u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true, disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};     
//]]>
</script>
<!-- Menù Responsive Multilivello Fine -->

Si salva il Tema. La riga evidenziata di giallo è jQuery e può essere tralasciata se tale libreria fosse già presente nel Tema. Le righe evidenziate di verde servono invece per aggiungere dei font personalizzati caricati da Google Fonts. I caratteri Font-Awesome e Oswald ovviamente possono essere sostituiti da altri.

Il menù deve essere posizionato al top della pagina come mostrato nella GIF animata. Si va sempre su Tema -> Modifica HTML e si cerca la riga

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

quindi subito sotto a questa si incolla questo codice

<!-- Menù multilivello mobile Inizio -->
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div id='navitions'>
        <div class='isi'>
          <nav class='navix' id='nav1'>
<div id='searchnya'>
               <form action='/search'>
           <input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Cerca…&apos;;}' onfocus='if (&apos;Cerca…&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Cerca…'/>
                <button title='Cerca' type='submit'>
                  <i class='fa fa-search siy'/>
                </button>
              </form>
            </div>
            <a href='#' id='mobilenav'>
              Select Menu             </a>
            <ul class='sf-menu' id='menunav'>
              <li>
                <a class='home' expr:href='data:blog.homepageUrl'>
                 Home
                </a>
              </li>
<li><a href='#'>LINK TEXT1 </a></li>
<li><a href='#'>LINK TEXT2</a>
<ul>
<li><a href='#'>FIRST LIST 1</a></li>
<li><a href='#'>FIRST LIST 2</a>
<ul>
<li><a href='#'>SECOND LIST 1</a></li>
<li><a href='#'>SECOND LIST 2</a>
<ul>
<li><a href='#'>THIRD LIST 1</a></li>
<li><a href='#'>THIRD LIST 2</a></li>
</ul>
</li>
<li><a href='#'>SECOND LIST 3</a></li>
</ul>
</li>
<li><a href='#'>FIRST LIST 3</a></li>
</ul>
</li>         
                   </ul>            
            <script type='text/javascript'>
              //<![CDATA[
              menunav (jQuery);
              //]]>
            </script>
          </nav>
        </div>
      </div>
   </b:if>
<!-- Menù multilivello Fine -->

Si salva il Tema.

PERSONALIZZAZIONE E SINTASSI DEL MENÙ

1. Il colore dello sfondo del menù è #F95B5B; mentre quello secondario è  #1D1D1D;. Questi e gli altri codici dei colori possono essere cambiati per averli in tono con il resto de layout.
2. Gli indirizzi dei post e delle pagine collegate alle voci debbono essere inseriti al posto dei cancelletti (#)
3. Il testo delle voci colorate di blu deve essere personalizzato.

Il primo livello del menù è formato dalle voci Home (collegata con uno specifico tag di Blogger al suo URL), LINK TEST 1, LINK TEST2. Un singolo elemento ha questa struttura

<li><a href="#">LINK TEXT1</a> </li>

Per aggiungere un nuovo livello si inserisce un nuovo elenco tra i tag </a> e </li> in questo modo

<li><a href="#">LINK TEXT1</a><ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a></li>
<li><a href="#">FIRST LIST 3</a></li>
</ul></li>

dove il nuovo livello aggiunto è colorato di viola. Tanto per fare un esempio nella voce

<li><a href="#">FIRST LIST 2</a> </li>

tra i tag </a> e </li> può essere inserito un altro livello in questo modo

<li><a href='#'>FIRST LIST 2</a><ul>
<li><a href='#'>SECOND LIST 1</a></li>
<li><a href='#'>SECOND LIST 2</a>
<ul></li>

Nella Demo è stato inserito anche un quarto livello con lo stesso principio. Quando una voce ha un livello ulteriore si visualizzerà l'icona rossa del più per aprirlo mentre con quella del meno lo si potrà richiudere.

Per essere certi di non visualizzare nella versione mobile anche il menù della versione desktop, il codice di quest'ultimo deve essere posto tra due tag condizionali in questo modo

<b:if cond='!data:blog.isMobileRequest'>
CODICE DEL MENÙ DESKTOP</b:if>

Ricordo che quando salverete il Tema il menù non si vedrà nell'Anteprima. Per testare che funzioni dovrete aggiungere la stringa ?m=1 all'indirizzo di un post o della Home per poi aprire la pagina con un dispositivo che abbia una risoluzione inferiore a 768 pixel. Se non avete sottomano un cellulare con cui testare il menù potete usare l'eccellente tool Screenfly che simula una visualizzazione con iPhone, iPad, Samsung, ecc.