Pubblicato il 05/08/14e aggiornato il

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.


demo-menu-tutto-schermo

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 ( # ). 

demo-menu

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.




10 commenti :

  1. Ciao Ernesto piccola domanda:cosa mi consigli per pubblicare automaticamente i post del blog sui vari social? grazie mille

    RispondiElimina
    Risposte
    1. Prova IFTTT
      http://www.ideepercomputeredinternet.com/2013/01/ifttt.html
      @#

      Elimina
    2. spero sia semplice...ho provato hootsuite ma nn ci capisco niente

      Elimina
  2. Molti di Noi blogger gestiamo più siti, e trovo questi post estremamente utili.
    Io ad esempio, sto cercando widget con cui posso inserire immagini e testo di feeds di un Blog su un'altro, ma non mi riesce di trovarlo qui su idee per computer.
    o meglio: ne ho trovato uno che porta ad un'applicazione la quale però non funziona più.

    RispondiElimina
    Risposte
    1. Non so se ti riferisci a questo servizio
      http://www.ideepercomputeredinternet.com/2013/07/feeder-ninja-widget-feed-url.html
      Mi pare che sia OK
      @#

      Elimina
  3. Davvero bellissimo! Però ho notato che spesso si apre il menù per sbaglio quando si va con il mouse sul tasto del browser per lo scroll della pagina. Soprattutto Chrome mi impazzisce. Spostare il tasto per l'apertura di questo menù sulla sinistra è una cosa facilmente fattibile?! Sarebbe perfetto. Poi ho visto che si può utilizzare per inserire la qualsiasi cosa e non solo dei semplici link. Davvero bello, io ho inserito il like box della mia pagina facebook ad esempio.

    RispondiElimina
    Risposte
    1. Non ho testato così come non lo avevo fatti per l'inserimento di contenuti diversi dai link. Poi provare a sostituire tutto quello che è right con left e viceversa per vedere un po' cosa succede
      @#

      Elimina
    2. Perfetto! Volevo informarti che ho risolto e magari puoi inserirlo in descrizione, può tornare utile ad altri. Per invertire l'apertura basta come detto da te cambiare tutti i left in right e viceversa ma serve anche modificare le voci "rotate(45deg)" aggiungendo il meno "rotate(-45deg)" e viceversa! ;)
      Ciao!

      Elimina
    3. Ok Grazie. Alla rotazione non avevo pensato :)
      Sarà utile agli altri utenti. Metto subito una postilla al post
      @#

      Elimina
    4. Di nulla, invece grazie mille a te come sempre per il tuo lavoro! ^^

      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.