Pubblicato il 06/08/15 - aggiornato il  | 20 commenti :

Responsive Menù Multilivello per la versione mobile di Blogger con casella di ricerca.

Come installare un menù Responsive e su 4 livelli per la versione Mobile di Blogger con la casella di ricerca.
Nel blog in cui è ospitato questo articolo al momento utilizzo due menù, uno per la versione desktop e uno per la versione mobile. Ci sono anche menù di tipo Responsive che si adattano automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina e che quindi possono servire per entrambe le versioni.

Personalmente però preferisco due menù distinti per desktop e mobile a meno che non si abbia un Modello Responsive di Blogger che spesso hanno anche un Menù Responsive già preinstallato. In questo articolo presenterò un menù che verrà visualizzato solo da mobile e segnatamente dai dispositivi che abbiano una risoluzione uguale o inferiore a 768 pixel che è poi quella dell'iPad


responsive-menu-blogger

Ho realizzato il menù su ben quattro livelli ma addirittura si potrebbero aumentare rispettando la sintassi come vedremo alla fine del post. Il menù è basato su jQuery con effetto Toggle e ha delle icone per facilitare la navigazione tra i vari livelli del menù. Oltre all'icona classica per aprire e chiudere il menù a forma di tre linee orizzontali ci sono le icone del più (+) e del meno (-) per visualizzare o nascondere il livello sottostante.  I tag condizionali presenti lo mostreranno solo nella versione mobile. Si può anche nascondere il Menù classico nella versione mobile per non avere due menù che sono oggettivamente sovrabbondanti. Nel menù è presente anche una casella di ricerca anch'essa Responsive che si adatta cioè ai vari dispositivi. Si va su Modello > Backup/Ripristino quindi si clicca su Scarica modello completo per salvare un file XML per poi eventualmente ripristinare il template nel caso in cui il menù non funzionasse.

Su Modello > Modifica HTML si cerca la riga </head> e, subito sopra, si incolla questo codice

<!-- Menù Responsive Multilivello Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.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[
// Superfish v1.7.2 - jQuery menu widget - Joel Brich
(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 -->

in questo modo

codice-menu-multilivello

Successivamente si scende nel template e si cerca la riga

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

che nei modelli molto vecchi può darsi che non ci sia. Ci sarà comunque sicuramente una riga <body> o comunque una riga che inizia con <body…  . Subito sotto va incollato

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

Si salva il modello.

PERSONALIZZAZIONE DEL MENÙ

  1. La riga evidenziata di giallo è la Libreria jQuery e se fosse già presente nel modello è meglio evitare di incollarla una seconda volta nel template
  2. Le righe evidenziate di verde importano nel modello i caratteri FontAwesome e Oswald. I più bravi di voi possono anche modificare queste impostazioni però con giudizio.
  3. Il colore di sfondo principale del menù è #F95B5B; mentre quello secondario è #1D1D1D;. Questi codici dei colori possono essere modificati a piacere.
  4. Gli indirizzi delle pagine collegate alle varie voci debbono essere inseriti al posto dei cancelletti ( # ). Mentre le espressioni colorate di blu debbono essere personalizzate.


COME CREARE LA STRUTTURA DEL MENÙ


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 inserire un secondo livello dobbiamo incollare tra i tag </a> e </li> un altro elenco

<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 secondo livello inserito è stato evidenziato di beige. In una o più voci del secondo livello si può inserire un terzo livello usando lo stesso procedimento. Per esempio nella riga 

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

tra i tag </a> e </li> può essere inserito questo terzo 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>

Nel menù di test è stato inserito anche un quarto livello seguendo lo stesso principio. Per essere sicuri 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 == "false"'>
CODICE DEL MENÙ DESKTOP
</b:if>

Ricordo che il menù non verrà visualizzato nell'Anteprima quando si salverà il template ma lo si vedrà solo quando si aprirà il blog con un cellulare o un tablet. Si può testare la visualizzazione da mobile con il tool Screenfly. La demo è relativa a una visualizzazione con iPad
Fonti | jQuery Superfish Menù PluginMy Blogger Tricks


20 commenti :

  1. Questo menu mi piace moltissimo. Volevo avvisarti che ho provato a inserirlo, ma la casella di ricerca non è a livello e le due immagini (quei tre trattini del menu e la lente d'ingrandimento) non si vedono.

    RispondiElimina
    Risposte
    1. Nel test funzionava tutto
      http://quirktools.com/screenfly/#u=http%3A//nuovo-blog-di-prova.blogspot.it/%3Fm%3D1&w=768&h=1024&a=22&s=1
      Ora ho aggiunto altre demo e come spesso accade qualche demo non funziona più tanto bene.
      @#

      Elimina
  2. Come faccio a capire quale è il codice del menu desktop, in modo da inserirlo tra i due tag condizionali? Chiedo scusa ma sono un novellino

    RispondiElimina
    Risposte
    1. Nel mio caso ora non si vede piu il banner dei cookie, ed il menu non si apre...

      Elimina
    2. Sei tu che lo hai installato :) Devi ricercare la pagina web da cui lo hai preso e cercare i codici nel template, mettere tra i tag solo la parte dei codici che va nella sezione visibile cioè tra i tag < body > e < /body >. I codici sopra < /head > o sopra a /b:skin possono essere lasciati come sono
      @#

      Elimina
    3. Il banner si vede. Basta aprire con una scheda in incognito
      @#

      Elimina
  3. Ok per il banner, bastava la scheda in incognito.Io avevo il menu originale di blogger anche per la versione mobile, ora ho provato ad installare quello preso da questo post ma mi ritrovo 2 menu nela versione mobile, tra cui quello appena installato non si apre ma funziona solo la casella cerca...Come posso fare?

    RispondiElimina
    Risposte
    1. Dovrei cercare il codice originale di blogger per la versione desktop? non so quale sia...

      Elimina
    2. Purtroppo non ho idea del perché non ti funzioni. Spesso accade che in alcuni template una cosa funzioni e un'altra no
      @#

      Elimina
  4. Ciao Ernesto. Ti ringrazio immensamente per i tuoi articoli. Sto imparando molto grazie a te partendo da zero.
    Ho una domanda, ho organizzato il menu mobile del mio blog a 3 livelli: poiché per aprire un sotto menu è necessario cliccare su + e per chiuderlo sul -, sarebbe possibile rendere cliccabile tutta la fascia dove è scritta il titolo del sotto menu per migliorare l'esperienza touch? Spero di essermi fatto capire. Attendo una tua risposta :D

    RispondiElimina
    Risposte
    1. Ah, e quali stringhe di codice mi danno il colore del rettangolo e del cerchio che circondano il + ed il - ??

      Elimina
    2. Il codice l'ho preso dal sito correttamente linkato a fine pagina. Onestamente non mi ricordo a quale codice si riferisce però lo puoi trovare cercando nel codice tutte le occorrenze di color per poi verificare a che colore corrispondano i vari codici esadecimali
      @#

      Elimina
    3. Ok, verificherò così :) E per quanto riguarda il rendere cliccabile l'intera fascia e non solo il + o il - ??

      Elimina
    4. @# Se fossi stato in grado di risponderti senza dovermi mettere a studiare tutto il codice lo avrei già fatto :)

      Elimina
    5. Va bene, proverò da solo allora. Grazie mille per il lavoro che fai, è utilissimo per tutti coloro che come me partono da 0.

      Elimina
  5. Si può bloccare la barra del menu in alto durante lo scrolling della pagina?

    RispondiElimina
  6. Prova a sostituire position:absolute con position:fixed ma non so se funzionerà. Potrebbe far sballare tutto il menù
    @#

    RispondiElimina
  7. Mettici anche il punto e virgola alla fine
    @#

    RispondiElimina
    Risposte
    1. Cambiando quasi tutti i position:absolute con position:fixed funziona ma solo con i sotto menu; rimate tutto bloccato in alto ma non la barra che è sempre visibile. Ho provato a mettere ex novo qua e la qualche position:fixed ma cambia tutto tranne che la posizione fissa della barra del menu quindi non saprei che altro provare. Può esserci qualche posizione specifica per mettere quella stringa di testo o qualche altro codice da modificare oppure non si può?

      Elimina
  8. Quello che si poteva provare senza mettere mano a tutto il codice te l'ho già detto
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy