Pubblicato il 18/06/15e aggiornato il

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

menu-responsive


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

menu-responsive-design

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


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.




8 commenti :

  1. Ciao,sto tentando di inserire il Menù Responsive sul blog ma mi sono perso con i colori. Ora il menu si vede, mi puoi aiutare a vedere i bottoni trasparenti? senza colore arancio?
    Grazie, Luca.

    RispondiElimina
    Risposte
    1. Non è una cosa particolarmente difficile. Non so però il grado delle tue conoscenze in materia. In sostanza ciascun colore è rappresentato da un codice che può essere HEX o RGB. In questo menù ci sono tre codici HEX
      #D5803A
      #fee5d0
      #ffffff
      dove l'ultimo è il bianco e i primi due sono arancio più scuro e più chiaro. Devi quindi modificare questi codici con i colori che preferisci. Leggiti questo post
      http://www.ideepercomputeredinternet.com/2013/01/codici-colori-trasparenza.html
      Però tu vuoi avere dei colori trasparenti quindi non si può usare i codici HRX ma quelli RGB. Per esempio i tre colori precedenti convertiti in RGB prendono questa forma
      RGB(213,128,58)
      RGB(254,229,208)
      RGB(255,255,255)
      Per la trasparenza la terzina diventa quartina in questo modo
      rgba(213,128,58,0.5)
      dove è stata inserita una trasparenza del 50%. Leggiti quest'altro post
      http://www.ideepercomputeredinternet.com/2015/06/hex-rgb-converer-codice-colori-html.html
      All'atto pratico devi sostituire le righe tipo
      background: #D5803A;
      con
      background: rgba(213,128,58,0.5);
      naturalmente dopo aver scelto colori e percentuale di trasparenza (0.5 sta per 50%, 0.45 per 45%, ecc)
      @#




      Elimina
    2. Il mio grado delle conoscenze è basso ma con le tue guide sono riuscito a sistemare il blog.
      Grazie infinite.

      Elimina
  2. Buongiorno Ernesto,

    complimenti per tutti i tuoi suggerimenti e guide.

    Ho inserito questo manu e adattato all'esigenza (colore, grandezza), funziona molto bene e anche sui dispositivi cell.
    Volevo chiederti cortesemente, se questo menu in modalità desktop é possibile centrarlo....

    Grazie in anticipo.
    Max

    RispondiElimina
    Risposte
    1. @#Non lo so. Prova a incollare <center> prima di
      <div id='cssmenu'> e </center> dopo le penultime righe
      </ul>
      </div>

      Elimina
    2. Grazie Ernesto.

      Proverò come hai indicato.

      Grazie e buona continuazione.
      Max.

      Elimina
  3. Ciao Ernesto volevo sapere se c'è la possibilità di creare delle sottosezioni aggiungendo ad esempio sotto alla voce Disclaimer un al'altro elemento! Grazie in anticipo per la risposta!

    RispondiElimina
    Risposte
    1. Per avere un menù su più livelli per mobile devi scegliere un altro codice come p.e. quello di questo post
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.