Scrolling menu: creare una pagina web a navigazione verticale (con menu sticky laterale)

Se sei un web designer o uno sviluppatore web, hai probabilmente incontrato la necessità di creare un menu di navigazione verticale che tenga traccia della sezione visualizzata durante lo scrolling di una pagina web. Questo tipo di esigenza è molto comune quando si sviluppano siti one-page (in cui tutti i contenuti del sito sono presenti in diverse sezioni impilate nella stessa pagina) o pagine molto ricche di contenuti.

In situazioni come questa la navigazione verticale durante lo scroll è una funzionalità estremamente comoda ed utile per migliorare la user experience e rendere la navigazione più intuitiva.

In questo articolo, vi mostrerò come realizzare questo tipo di menu di navigazione utilizzando HTML, CSS e jQuery.

Quando usare un menu di navigazione verticale (e come funziona)

La navigazione verticale (allo scroll) è una tecnica particolarmente utile per siti web con una struttura a pagina singola (one-page) o con lunghe pagine di contenuto. Si pensi, ad esempio, a lunghe pagine web contenenti testi, infografiche, video, ecc. Grazie ad un menu di questo genere si consente all’utente di visualizzare immediatamente ciò che è di suo interesse senza dover effettuare lo scroll di tutta la lunghezza della pagina.

In pratica, grazie ai link del menu, è possibile spostarsi verticalmente all’interno della stessa pagina e, attraverso lo scroll automatico, posizionarsi sul blocco di contenuti di proprio interesse.

Il funzionamente è analogo a quello delle classiche ancore HTML che, come sappiamo, consentono di spostarsi in diversi punti della stessa pagina.

Descrizione e aspetto del menu di navigazione verticale

Il nostro obiettivo è quello di creare un menu di navigazione verticale che includa una serie di link, ognuno con un’icona (nel nostro esempio un semplice pallino) e un testo accanto.

Le voci del menu saranno posizionate in overlay sul fianco sinistro della pagina dove resteranno sempre visibili a prescidnere dallo scroll (effetto sticky) e si illumineranno a seconda del contenuto visualizzato sullo schermo dall’utente.

Quando l’utente scorre la pagina verso una nuova sezione, il link corrispondente verrà evidenziato, indicando chiaramente la sezione attualmente visualizzata.

Codice HTML di Base: struttura della pagina web a navigazione verticale

Cominciamo con la struttura HTML di base:

<div class="vertical-menu">
    <a href="#section1" class="active">
        <i></i>
        <span>Sezione 1</span>
    </a>
    <a href="#section2">
        <i></i>
        <span>Sezione 2</span>
    </a>
    <a href="#section3">
        <i></i>
        <span>Sezione 3</span>
    </a><!-- Aggiungi altri link per le sezioni desiderate -->
</div>

<div id="section1" style="height: 100vh;">
    <!-- Contenuto Sezione 1 -->
</div>

<div id="section2" style="height: 100vh;">
    <!-- Contenuto Sezione 2 -->
</div>

<div id="section3" style="height: 100vh;">
    <!-- Contenuto Sezione 3 -->
</div>

Abbiamo creato una struttura di base con un menu di navigazione verticale e tre sezioni di contenuto. Ogni link nel menu ha un marcatore (tag <i>) e un testo accanto ad esso.

Stile CSS del menu di navigazione verticale

Ora, diamo un’occhiata al CSS per rendere il nostro menu di navigazione visivamente accattivante:

/* Stile generale */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Stile per il menu di navigazione verticale */
.vertical-menu {
    position: fixed;
    top: 50%;
    left: 10px; /* Regola la posizione orizzontale */
    transform: translateY(-50%);
    z-index: 999;
}

/* Stile per i link del menu */
.vertical-menu a {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

/* Stile per l'icona del pallino */
.vertical-menu a i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #222;
    margin-right: 10px;
}

/* Stile per il testo accanto all'icona */
.vertical-menu a span {
    font-size: 14px;
}

/* Stile per il link attivo */
.vertical-menu a.active i {
    background-color: #ff0000;
}

.vertical-menu a.active span {
    color: #ff0000;
}

/* Nascondi il testo su dispositivi mobili */
@media (max-width: 768px) {
    .vertical-menu a span {
        display: none;
    }
}

Abbiamo definito lo stile per il menu di navigazione, i link e gli elementi di formattazione per il link attivo. Il nostro menu di navigazione ora ha un aspetto accattivante e i link cambieranno colore quando saranno attivi (ciò in base alla sezione visualizzata dall’utente durante lo scrolling di pagina).

Codice jQuery per la navigazione verticale (e scroll animato)

Infine, useremo jQuery per gestire il comportamento durante lo scroll e aggiornare la classe “active” del link corrente. Ecco il codice jQuery:

$(document).ready(function() {
    // Gestisco il click su link del menu
    $('.vertical-menu a').click(function() {
        var target = $($(this).attr('href'));

        // Applico una semplice animazizone allo scroll per rendere più gradevole l'effetto
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);

        return false;
    });

    // Gestisco lo scroll della pagina per aggiornare la classe "active"
    $(window).scroll(function() {
        $('.vertical-menu a').each(function() {
            var target = $($(this).attr('href'));
            var offsetTop = target.offset().top;
            var windowHeight = $(window).height();
            var scrollPos = $(window).scrollTop();

            // Aggiorno la classe active della voce corrispondente al contenuto visualizzato nella finestra del browser
            if (scrollPos >= offsetTop - (windowHeight / 2)) {
                $('.vertical-menu a').removeClass('active');
                $(this).addClass('active');
            }
        });
    });
});

Questo codice jQuery è responsabile di due comportamenti principali:

1. quando un link nel menu viene cliccato, la pagina scrollerà automaticamente alla sezione corrispondente;
2. quando l’utente scorre la pagina (sia attraverso il menu che manualmente), la classe “active” viene aggiornata automaticamente in base alla sezione visualizzata nella finestra del browser.

In questo modo, l’utente può sempre vedere chiaramente quale sezione sta visualizzando durante lo scroll ed altrettanto agevolmente può spostarsi tra i vari contenuti con un semplice click su un link.

E’ disponibile una demo funzionante a questa pagina.

Conclusioni

La navigazione verticale durante lo scroll di pagina è un elemento di design che può migliorare notevolmente l’usabilità del tuo sito web. Con il codice HTML, CSS e jQuery fornito in questa guida sei pronto a implementare questa funzionalità avanzata nei tuoi progetti web. Agendo sul codice CSS è possibile adattare a piacimento l’aspetto del menu alle proprie esigenze grafico-stilistiche ed adattare questa funzionalità all’interno di ogni progetto.