Pubblicato il 20/01/17 - aggiornato il  | 12 commenti :

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.

menu-responsive-floating






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.



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.


12 commenti :

  1. Ciao, ho provato ad inserire questo menu ma da mobile non si vede, forse dipende dal modello del blog?
    http://123provatemi.blogspot.it/?m=1
    http://123provatemi.blogspot.it/?m=0

    RispondiElimina
    Risposte
    1. La demo funziona. Forse non hai attivato la visualizzazione da mobile personalizzata. Vai su Tema -> Cellulare -> Ruota dentata -> Sì. Mostra tema... e sceglie il Tema "Personalizza" e non gli altri quindi salva
      @#

      Elimina
  2. Perfetto funziona, grazie Ernesto.
    Ora cambio i colori 😊

    RispondiElimina
  3. Ciao, non centra molto con l'articolo ma chiedo lo stesso qui.
    E' possibile su Blogger, con lo scrolling, rendere l'header più piccolo bloccandolo in alto?

    RispondiElimina
    Risposte
    1. Hai un profilo senza neppure un blog quindi non posso sapere che modello hai.
      Nel caso tu abbia un Tema non Responsive puoi semplicemente caricare una foto con una altezza minore.
      Per rendere l'Header fluttuante leggiti questo post
      https://www.ideepercomputeredinternet.com/2013/04/fixed-widget-blogger.html
      Nel caso dell'Header il suo ID dovrebbe essere Header1 che devi quindi sostituire nel codice al posto di HTML14 usato come esempio.
      Quello che ho scritto non vale se hai un Tema Responsive o Dynamic View
      @#

      Elimina
    2. Grazie mille! Ora il sito si vede, lo sto usando solo per fare qualche prova.
      Ho bloccato il widget in alto ma vorrei che lo sfondo del widget non si limitasse ai suoi confini bensì andasse a coprire tutta la riga (in modo che non ci fosse del bianco ai suoi lati per intendersi, come per l'header). Si può fare?
      Ne approfitto per chiedere un'altra cosa. E' possibile far sì che il testo cambi colore nel momento in cui il widget si fissa in alto? Spero di essermi spiegato.
      Grazie!!

      Elimina
    3. Prova a sostituire l'ID che hai sostituito nel codice del post linkato, ovvero Text3, con header-outer e guarda un po' come si presenta la situazione
      @#

      Elimina
  4. Mmmmmh, non so se sbaglio qualcosa ma così facendo non si risolve purtroppo. Semplicemente non rimane più bloccato in alto il widget sotto l'header

    RispondiElimina
  5. questo (a differenza di "Come installare un drop-down menù sempre visibile in Blogger" e di "Menù orizzontale a discesa per Blogger con casella di ricerca e bottoni per social network") si adatta anche alla versione mobile trasformandosi nelle 3 linee. è possibile aggiungervi un sottomenù con le voci che si aprono al passaggio del cursore sulle voci principali o con il click?

    RispondiElimina
    Risposte
    1. È stato pensato in questo modo perché funzionasse anche nella versione per il mobile dove il cursore non esiste.
      @#

      Elimina
    2. pur seguendo le guide per mettere sidebar / menu visibili solo mobile o solo desktop, non riesco... non c'è verso! non capisco proprio perché..

      Elimina

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