Menù Responsive di Blogger per desktop e per mobile.

Come installare un menù responsive in un blog di Blogger che si adatti automaticamente alla risoluzione desktop e mobile (tablet e smartphone)

A partire dal prossimo 31 Agosto verrà presumibilmente disabilitato il servizio hosting di Google Drive e questo avrà come effetto che i widget e i menù che utilizzano dei file javascript caricati su Google Drive smetteranno di funzionare. Ho quindi pensato di riproporre alcune personalizzazioni importanti che escludano hosting esterni e che caricano i CSS e i javascript direttamente nel modello.

In questo post presenterò un menù Responsive. Ricordo che la Grafica Responsive altrimenti chiamata anche Responsiva permette al layout degli elementi di adattarsi alla risoluzione del dispositivo con cui viene aperta la pagina. Ricordo che si possono scaricare da internet Modelli Responsive per Blogger e Temi Responsive per Wordpress.

Un menù responsive si adatta quindi al dispositivo e avrà un aspetto diverso se viene aperto da desktop o da mobile. Il breakpoint cioè il punto di passaggio da una visualizzazione all'altra solitamente viene settato in 768 pixel che è la risoluzione dell'iPad. Per una ulteriore personalizzazione sono stati utilizzati anche i Google Fonts.  Si utilizza anche la libreria jQuery. Se fosse già presente nel vostro modello tralasciate di incollare la riga del codice evidenziata di giallo.

L'installazione del menù è molto più semplice di quanto non possa sembrare e le difficoltà riguardano solo la personalizzazione dei colori, la creazione delle voci e l'incollare gli URL del nostro menù. L'aspetto del menù quando viene aperto da mobile è il seguente

Il navigatore dovrà cliccare sulla icona del menù a forma di tre linee orizzontali per aprire le varie voci che si visualizzeranno al di sotto e che potranno essere nuovamente nascoste con un altro click. Se invece il menù si apre da desktop avrà le stesse voci del mobile animate al passaggio del mouse

 

Dopo aver salvato il modello per un eventuale ripristino si va su Modello -> Modifica HTML e si cerca una delle due righe <header> o </header>.  La prima indica l'inizio della Intestazione e la seconda la fine della stessa. Se si vuole mostrare il menù sopra all'Header il codice va incollato sopra a <header> se invece si vuole mostrare sotto l'Intestazione si deve incollare il codice sotto </header>. Il codice in ogni caso è lo stesso ed è il seguente:

<!-- Menu Responsive 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>
<!-- Menu Responsive Fine -->

Si salva il modello. Per la personalizzazione del menù si possono modificare i codici dei colori che ho usato per adattarli ai colori del blog di prova e che sono #ffffff, #FEE5D0, #D5803A e #955928. La famiglia di Google Fonts utilizzata è quella Raleway che può essere cambiata.

La parte finale del codice è quella che determina il contenuto del menù. Il testo colorato di blu è quello delle voci del menù mentre gli URL dei post e delle pagine collegate debbono essere sostituiti ai cancelletti ( # ). Si possono aggiungere anche più voci inserendo altre righe con questa sintassi

<li><a href='URL_LINK'>VOCE MENÙ</a></li>

Demo

Clicca qui

Demo

Clicca qui

Concludo ricordando che la riga evidenziata di giallo è jQuery e che può essere tralasciata se tale libreria fosse già presente nel modello di Blogger. Infine la durata della animazione determinata dal CSS3 è di 0.3s; vale a dire di tre decimi di secondo.