Menù Responsive e Flottante per Blogger.

Come installare su Blogger un Menù Responsive che si adatta automaticamente a dispositivi desktop e mobili e che rimanga fisso allo scorrere della pagina.

Ho appena risposto a un commento in cui mi si chiedeva se fosse possibile rendere fluttuante un Menù Responsive per Blogger. La mia risposta è stata sul momento negativa perché usando il CSS si può fare ben poco per fissare un elemento in alto quando si scorre la pagina.

Infatti la parola fluttuante o flottante è una traduzione letterale della parola inglese floating che si riferisce al movimento di un oggetto in acqua o in altri liquidi. Per abuso di linguaggio si definisce altresì flottante anche un elemento che rimane fisso nel layout di una pagina web quando la si scorre. Il CSS ha un tag specifico per questa proprietà, che è position:fixed e che insieme a position:absolute e position:relative permette di posizionare gli elementi in modo assoluto o relativo.

Un menù specialmente su più livelli non permette però di utilizzarli nel migliore dei modi per fissare l'elemento in alto della pagina. Vediamo come risolvere utilizzando il javascript e la libreria jQuery. In questo articolo mi occuperò esclusivamente del menù Responsive che è stato oggetto del commento. Se il tema interessa potrei pubblicare anche un articolo per mostrare come rendere flottante la maggior parte dei menù di Blogger e nello specifico anche il Menù delle Pagine Statiche.

Questo menù Responsive oltre alla caratteristica di adattarsi alla risoluzione di tutti i dispositivi desktop o mobili con cui viene aperto il sito, ha anche quella di rimanere sempre visibile in alto.

Nella versione desktop c'è una animazione con ribaltamento quando si passa il mouse sopra a una voce mentre nella versione mobile per aprire il menù occorre toccare la icona a tre linee orizzontali. In tutti e due i casi il menù rimarrà ancorato in alto allo scorrere della pagina.

COME INSTALLARE IL MENÙ RESPONSIVE FLUTTUANTE

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca una di queste due righe di codice: <header> o </header>. La prima indica l'inizio della Intestazione mentre la seconda ne indica la fine. Per mostrare il menù sopra all'Header il suo codice va incollato prima di <header> mentre per visualizzarlo al di sotto il codice va incollato subito dopo a </header>. Il codice è 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{
width:100%;
z-index: 9999;
}
#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>
//<![CDATA[
$(function() {
var $flotarMenu = $("#cssmenu"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<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.

Demo
Clicca qui

Demo
Clicca qui

Le personalizzazioni è opportune effettuarle solo nei CSS cioè nel codice che si trova tra i tag <style> e </style> mentre sono rischiose nel javascript se non si conosce bene tale linguaggio. Possono essere modificati i codici dei colori e lo stile del bordo. I codici dei colori che ho usato sono #ffffff, #FEE5D0, #D5803A e #955928 per lo sfondo del menù e per l'effetto hover.

La famiglia di font usata è quella Raleway installata tramite Google Fonts che può essere sostituita con un'altra. La durata della animazione per la visualizzazione da desktop è stata settata in 0.3s; cioè in tre decimi di secondi.  Le voci del menù possono essere ovviamente modificate e va incollato l'URL del post o della pagina collegata al posto del cancelletto (#). Se ne possono aggiungere altre mantenendo la stessa sintassi. La riga evidenziata di giallo è la libreria jQuery (ultima versione) che può essere tralasciata per i modelli di Blogger in cui fosse già presente. Infine è stato impostato il breakpoint del passaggio dalla versione desktop a quella mobile per una risoluzione di 768 pixel. Vale a dire per dispositivi con una risoluzione superiore sarà mostrata la versione desktop del menù mentre per quelli con una risoluzione inferiore verrà mostrata la versione mobile. Per fare un paio di esempi si visualizzerà sempre la versione mobile negli smartphone mentre con quasi tutti i tablet si visualizzerà la versione desktop.