Menù scorrevole a tutta pagina per Blogger.

Come installare un menù a tutto schermo con effetto scorrimento e trasparenza.

Se si desidera creare un network di siti è opportuno avere anche una pagina iniziale con i collegamenti a ciascuno di questi. Invece di optare per una pagina di benvenuto o per un messaggio ai lettori si potrebbe pensare a un menù aggiuntivo con i link a tutti i blog del network. 

Vado appunto a illustrare un menù che potrebbe essere usato anche in questo caso fermo restando che potrebbe avere anche altri utilizzi a discrezione del webmaster. Il menù i n questione si attiva passando il mouse nell'angolo in alto a destra sulla icona che ricorda i menù dei dispositivi mobili. Con un effetto scorrimento e trasparenza il menù verrà mostrato a tutta pagina con le voci con i corrispettivi collegamenti visualizzate al centro in un elenco verticale. Per chiudere il menù si passa il cursore sulla icona della crocetta in alto a sinistra.

Per la sua installazione non occorre neppure modificare il template. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<style>
/* Stuff I added */
.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:4%; }
/* The rest I chnaged parts but not most of it */
.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  z-index: 998; 
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background: rgba(100,200,240,.9); 
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > nav ul {
  left: 0;
}
nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
</style>
<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav>
        <ul>
           <li><a href="#">BLOG</a></li>
           <li><a href="#">PROGETTI</a></li>
           <li><a href="#">ABOUT</a></li>
           <li><a href="#">CONTATTO</a></li>
           <li><a href="#">NETWORK</a></li>
           <li><a href="#">STRUMENTI</a></li>
           <li><a href="#">PRIVACY</a></li>
          <li><a href="#">PORTFOLIO</a></li>           
       </ul>
   </nav>
</div>
<a class="menu-close" onclick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>

Si salva e non importa neppure posizionare l'elemento pagina anche se è preferibile inserirlo subito sotto l'intestazione. Le voci del menù colorate di blu possono ovviamente essere modificate o anche eliminate. I rispettivi link vanno incollati al posto dei cancelletti ( # ). 

Chi volesse mostrare questo menù solo in una determinata pagina come potrebbe essere per esempio la homepage può usare i tag condizionali applicati al widget HTML. I codici dei colori sono inseriti tramite lo standard RGBA e se si vogliono modificare può essere utile il convertitore HEX RGB. Concludo ricordando che la durata della transizione è stata settata in mezzo secondo.

Fonte | Zac Saucier su Codepen -

Aggiornamento: Si potrebbe voler invertire la posizione delle icone di apertura e di chiusura del menù specialmente se si ha un sito su Blogger con la Navbar visibile e con i relativi link posizionati sulla destra che non si possono cliccare. Come da una conversazione avuta con un lettore che può essere consultata nei commenti 3, 3.a, 3.b e 3.c basterà sostituire tutte le occorrenze di left con right e viceversa tutte le occorrenze di right con left. Bisognerà anche invertire il senso della rotazione di 45 gradi e quindi sostituire rotate(45deg) con rotate(-45deg) e viceversa.