Creiamo con JAVASCRIPT e CSS un menu per il nostro sito che si nasconda ed appaia allo scorrimento della pagina.
In questo tutorial realizziamo un classico menu a scomparsa, legato allo scorrimento della pagina. Scomparirà quando scenderemo verso il basso della pagina, riapparirà quando risaliremo.
Si tratta di una tipologia di meni molto diffusa, sopratutto con l'avvento del responsive e l'esigenza di ottimizzare gli spazi di navigazione. Avere un menu in alto sempre presente aiuta notevolmente l'esperienza di navigazione degli utenti.
Vediamo un esempio molto semplice di applicazione per imparare la teoria, per poi passare ad una libreria pronta all'uso. Al lavoro!
Creiamo un menu a scomparsa
Partiamo dalla creazione di un menu di navigazione, <div id='navbar'>, lungo il 100% della pagina, e fissato ("fixed") al top della pagina stessa in modo che non cambi mai la sua posizione.
Nel CSS utilizziamo il selettore "navbar" per definire queste proprietà del menu, ed il suo colore.
Sotto al menu il contenuto, un testo, all'interno di un div: <div id='content'>. Diamogli una altezza notevole così da poter vedere l'effetto ottenuto con lo scroll di pagina (oppure scrivi molte righe di testo).
Essendo il menu fissato sempre in alto, e ipotizzando abbia una altezza di 30/40 pixel, dobbiamo fare in modo che il div con il contenuto sottostante inizi a visualizzarsi sotto al menu, applicando un padding-top di 30px. Se non lo applicassimo, i primi 30px del contenuto sarebbero dietro al menu, quindi nascosti.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
background-color: #f1f1f1;
}
p{
margin:0;
}
#navbar {
text-align:center;
background-color: #177dc0;
width: 100%;
position: fixed;
}
#navbar a {
color: #ffffff;
text-align: center;
padding: 0 20px;
text-decoration: none;
font-size: 140%;
}
#navbar a:hover {
background-color: #0b5889;
color: #ffffff;
}
#content {
padding-top:30px;
height:2000px;
}
</style>
</head>
<body>
<div id='navbar'>
<a href="#home">Home</a>
<a href="#prodotti">Prodotti</a>
<a href="#news">News</a>
<a href="#contatti">Contatti</a>
</div>
<div id='content'>
<p>Questo è una esempio. <br />Questa è una prova. </p>
</div>
</body>
</html>Adesso apportiamo alcune modifiche al codice:
- Aggiungiamo un javascript: allo scorrimento della pagina ("onscroll") eseguiamo la funzione "scrollFunction".
Vogliamo che se lo scorrimento della pagina supera i 100 px dal top della stessa, il menu scompaia, altrimenti vogliamo sia visibile. - Inoltre, se vogliamo dare un effetto "fluido" all'apparire/scomparire del menu, aggiundiamo una "transition" al selettore "navabar" del css.
Questo il codice completo ottenuto
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
background-color: #f1f1f1;
}
p{
margin:0;
}
#navbar {
text-align:center;
background-color: #177dc0;
position: fixed;
width: 100%;
transition: top 0.3s;
}
#navbar a {
color: #ffffff;
text-align: center;
padding: 0 20px;
text-decoration: none;
font-size: 140%;
}
#navbar a:hover {
background-color: #0b5889;
color: #ffffff;
}
#content {
padding-top:30px;
height:2000px;
}
</style>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("navbar").style.top = "-50px";
} else {
document.getElementById("navbar").style.top = "0";
}
}
</script>
</head>
<body>
<div id='navbar'>
<a href="#home">Home</a>
<a href="#prodotti">Prodotti</a>
<a href="#news">News</a>
<a href="#contatti">Contatti</a>
</div>
<div id='content'>
<p>Questo è una esempio. <br />Questa è una prova. </p>
</div>
</body>
</html>Provate questo codice. Quando vi spostate con la scrollbar verso il basso, o in modalità mobile trascinate verso il basso la pagina, il menu sparisce quando raggiungiamo i 100 pixel dal top. Tornando su con la pagina, raggiunti nuovamente i 100px dal top, il menu riappare. Miracolo!
Bene, abbiamo visto un esempio molto semplice che potete elaborare a vostro piacimento.
Esistono tuttavia script già pronti all'uso, che potete adattare alle vostre esigenze, come "headroom.js" che potete vedere in azione e scaricare dalla pagina dell'autore. Vediamo come utilizzarlo.
Come funziona headroom.js
Il vantaggio di questo script è che è in javascript puro, non ha bisogno di dipendenze o di JQuery.
A differenza del nostro esempio, in questo script il menu riappare non appena si scorre verso l'alto della pagina. Tornando verso l'alto, infatti, è probabile che l'utente voglia tornare al top del sito, e quindi voglia rivedere il menu. Ricordiamoci che in un sito gli utenti vengono al primo posto, dobbiamo quindi adottare tutti gli accorgimenti necessari per agevolare l'utente nella sua navigazione.
Dal nostro esempio eliminiamo lo script inline usato e dal css la transition, ed includiamo il file js scaricato
<script type="text/javascript" src="headroom.js"></script>Aggiungiamo questo codice js a fondo pagina
<script>
// identifico l'elemento menu
var myElement = document.getElementById('navbar');
// creo una istanza dello script, e passo allo script l'elemento menu
var headroom = new Headroom(myElement);
// inizializzo
headroom.init();
</script>Rivediamo tutto il codice
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin:0;
background-color: #f1f1f1;
}
p{
margin:0;
}
#navbar {
text-align:center;
background-color: #177dc0;
position: fixed;
width: 100%;
}
#navbar a {
color: #ffffff;
text-align: center;
padding: 0 20px;
text-decoration: none;
font-size: 140%;
}
#navbar a:hover {
background-color: #0b5889;
color: #ffffff;
}
#content {
padding-top:30px;
height:2000px;
}
.headroom--pinned {
display:block;
}
.headroom--unpinned {
display:none;
}
</style>
<script type="text/javascript" src="headroom.js"></script>
</head>
<body>
<div id='navbar' class='headroom'>
<a href="#home">Home</a>
<a href="#prodotti">Prodotti</a>
<a href="#news">News</a>
<a href="#contatti">Contatti</a>
</div>
<div id='content'>
<p>Questo è una esempio. <br />Questa è una prova. </p>
</div>
<script>
var myElement =document.getElementById('navbar');
var headroom = new Headroom(myElement);
headroom.init();
</script>
</body>
</html>Se provate questo codice , utilizzando un ispector potrete vedere che lo script aggiunge automaticamente ad nostro menu "navbar" varie classi tra cui
.headroom: quando l'elemento è inizializzato
.headroom--pinned: quando mi muovo verso l'alto
.headroom--unpinned: quando mi muovo verso il basso
Dobbiamo essere noi, e non il javascript, ad applicare a queste classi l'effetto voluto: far sparire il menu quando mi muovo verso il basso ("display:block"), e riapparire quando vado verso l'alto ("display:none").
Ed è quello che abbiamo fatto nel nostro css.
Nel nostro esempio il menu appare e scompare senza un effetto di transizione. Applichiamolo, modificando così il css.
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}Abbiamo utilizzato lo script con le sue opzioni di default, ma possiamo personalizzarlo.
- Ad esempio possiamo decidere quando far apparire/sparire il menu (nel nostro esempio iniziale avevamo deciso al raggiugimento dei 100px dall'alto).
- Oppure possiamo richiamare una funzione al raggiungimento di una determinata posizione (es al bottom della pagina).
- E' possibile modificare il nome delle classi applicate automaticamente dallo script.
Per l'elenco completo delle opzioni si rimanda alla pagina dell'autore dello script.
Vediamone assieme solo alcune:
<script>
var myElement =document.getElementById('navbar');
var headroom = new Headroom(myElement, {
// il menu scompare raggiunti i 100px dal top della pagina
"offset": 100,
// per applicare l'effetto lo scroll deve essere almeno di 5 pixel
"tolerance": 5,
// al raggiungimento del bottom della padina eseguo questa funzione
"onBottom" : function() {alert('sei arrivato a fondo pagina');},
});
headroom.init();
</script>That's all !
