Come creare un Menù Responsive per Blogger.

Come creare un menù che sia orizzontale nella versione desktop e verticale in quella per dispositivi mobili a partire dall'iPad in giù.

Ricordo che il Responsive Design o Disegno Responsivo è quel tipo di grafica che si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina. Ci sono a disposizione degli webmaster dei Temi Responsive per Wordpress per creare un blog che sia visibile in modo adeguato da desktop come da smartphone o tablet. Inoltre una buona visualizzazione mobile friendly viene premiata da Google mentre vengono penalizzati i siti che non la abbiano.

Anche gli utenti di Blogger possono scaricare dalla rete modelli con il Responsive Design ma possono anche modificare un template ufficiale di Blogger per farlo diventare Responsive. Uno degli elementi più difficili da adattare è certamente il menù. Gli utenti della piattaforma Blogger possono risolvere con i tag condizionali e mostrare un dato menù per il mobile e un altro menù per il desktop.

Ho già presentato un Menù Responsive per Blogger su due livelli che si adatta automaticamente alla risoluzione del dispositivo. Quella soluzione però era un po' complessa e prevedeva un intervento piuttosto pesante nel modello da cui si poteva fare marcia indietro con una certa difficoltà. Con il menù che invece vado a illustrare oggi non ci sono problemi di questo tipo basta infatti incollare un codice nel template e toglierlo quando non lo riterremo più adeguato alle nostre esigenze. Si tratta di un menù a un solo livello. In un prossimo post magari ne presenterò uno a più livelli sperando che riesca a risolvere delle problematiche che si presentano in quel caso. Ecco il menù da desktop

Se tale menù si apre invece da mobile cambia completamente la sua struttura

Il passaggio da una visualizzazione all'altra avviene a 768 pixel. In sostanza con un iPad in giù il menù da orizzontale diventerà verticale e si aprirà con un tap in alto a destra. Nella Demo ho inserito questo menù sopra alla Intestazione del blog ma si possono testare anche altre posizioni. Dopo aver salvato il template si va su Modello > Modifica HTML e si cercano le righe <header> o </header>. La prima indica l'inizio della Intestazione e la seconda la fine della stessa. Se si vuole posizionare il menù prima dell'Header il codice va incollato subito sopra a <header> mentre se lo si vuole posizionare sotto il codice va incollato subito sotto a </header> . Il codice in ogni caso è:

<!-- CSS Menu Inizio -->
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu &gt; ul:after {
  content: &quot;.&quot;;
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu &gt; ul {
  background: #D5803A;
}
#cssmenu &gt; ul &gt; li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center &gt; ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center &gt; ul &gt; li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right &gt; ul &gt; li {
  float: right;
}
#cssmenu &gt; ul &gt; li &gt; a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #D5803A;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu &gt; ul &gt; li.active &gt; a {
  color: #FEE5D0;
}
#cssmenu &gt; ul &gt; li:hover &gt; a,
#cssmenu &gt; ul &gt; li &gt; a:hover {
  color: #FEE5D0;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu &gt; ul &gt; li &gt; a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #FEE5D0;
  background: #955928;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu &gt; ul &gt; li:hover &gt; a::before,
#cssmenu &gt; ul &gt; li &gt; a:hover::before {
  background: #D5803A;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen &gt; ul,
#cssmenu.small-screen.align-center &gt; ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen &gt; ul &gt; li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen &gt; ul &gt; li:hover &gt; a,
#cssmenu.small-screen &gt; ul &gt; li &gt; a:hover {
  color: #FEE5D0;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen &gt; ul &gt; li &gt; a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #D5803A;
}
#cssmenu.small-screen #menu-button:after {
  content: &quot;&quot;;
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #FEE5D0;
  border-bottom: 2px solid #FEE5D0;
}
#cssmenu.small-screen #menu-button:before {
  content: &quot;&quot;;
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #FEE5D0;
}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($) {
  $.fn.menumaker = function(options) {     
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        breakpoint: 768,
        sticky: false
      }, options);
      return this.each(function() {
        cssmenu.find('li ul').parent().addClass('has-sub');
        if (settings.format != 'select') {
          cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
          $(this).find("#menu-button").on('click', function(){
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) {
              mainmenu.hide().removeClass('open');
            }
            else {
              mainmenu.show().addClass('open');
              if (settings.format === "dropdown") {
                mainmenu.find('ul').show();
              }
            }
          });
          multiTg = function() {
            cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
            cssmenu.find('.submenu-button').on('click', function() {
              $(this).toggleClass('submenu-opened');
              if ($(this).siblings('ul').hasClass('open')) {
                $(this).siblings('ul').removeClass('open').hide();
              }
              else {
                $(this).siblings('ul').addClass('open').show();
              }
            });
          };
          if (settings.format === 'multitoggle') multiTg();
          else cssmenu.addClass('dropdown');
        }
        else if (settings.format === 'select')
        {
          cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
          var selectList = cssmenu.find('select');
          selectList.append('<option>' + settings.title + '</option>', {
                                                         "selected": "selected",
                                                         "value": ""});
          cssmenu.find('a').each(function() {
            var element = $(this), indentation = "";
            for (i = 1; i < element.parents('ul').length; i++)
            {
              indentation += '-';
            }
            selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
          });
          selectList.on('change', function() {
            window.location = $(this).find("option:selected").val();
          });
        }
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
        resizeFix = function() {
          if ($(window).width() > settings.breakpoint) {
            cssmenu.find('ul').show();
            cssmenu.removeClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').hide();
            }
            else {
              cssmenu.find("#menu-button").removeClass("menu-opened");
            }
          }
          if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
            cssmenu.find('ul').hide().removeClass('open');
            cssmenu.addClass('small-screen');
            if (settings.format === 'select') {
              cssmenu.find('select').show();
            }
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
      });
  };
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
  $("#cssmenu").menumaker({
    title: "Menu",
    format: "dropdown"
  });
  $("#cssmenu a").each(function() {
      var linkTitle = $(this).text();
      $(this).attr('data-title', linkTitle);
  });
});
});
})(jQuery);
//]]>
    </script>
    <div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Disclaimer</a></li>
   <li><a href='#'>Privacy</a></li>
   <li><a href='#'>Etichette</a></li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contatti</a></li>
</ul>
</div>
<!-- CSS Menu Fine -->

Si salva il modello. Il cosiddetto breakpoint cioè il passaggio dalla visualizzazione desktop a quella mobile avviene a una risoluzione di 768 pixel. La parte finale del codice è il menù vero e proprio dove vanno incollati gli URL delle pagine web collegate al posto dei cancelletti #. Ovviamente si possono cambiare i nomi delle voci del menù colorate di blu. Si possono anche aggiungere altre righe mantenendo la stessa sintassi <li><a href='URL_LINK'>VOCE MENÙ</a></li>. 

Si possono cambiare anche i codici dei colori  del menù che ho adattato a quelli del modello del blog di test e che sono #ffffff, #FEE5D0, #D5803A e #955928.  La famiglia di font è Raleway ed è stata inserita mediante Google Fonts e può essere modificata cambiando la riga evidenziata di giallo. Qui di seguito ho postato due Demo. La prima mostra il menù da desktop e la seconda da mobile

Demo
Clicca qui

Demo
Clicca qui

Concludo ricordando che la riga evidenziata di verde serve per richiamare la libreria jQuery e può essere eliminata se jQuery fosse già presente nel vostro template.