JavaScript: creare un menu di navigazione con cursore

JavaScript: creare un menu di navigazione con cursore

In questo articolo vedremo come implementare un menu con cursore in JavaScript.

L'idea è quella di creare un cursore che segua il movimento del mouse sulle voci del menu. Possiamo partire dalla seguente struttura HTML:

<nav id="navigation">
    <div id="lava" aria-hidden="true">
        <div id="lava-cursor"></div>
    </div>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

Assegniamo al cursore e al suo contenitore i seguenti stili CSS:

#lava {
    width: 100%;
    height: 0.2rem;
    position: relative;
}

#lava-cursor {
    width: 5.4rem;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 500ms ease-in;
}

Dobbiamo legare un evento mouseover su ciascuna voce del menu leggendo al suo interno il valore della proprietà offsetLeft della voce di menu corrente che andrà ad impostare la proprietà CSS left del nostro cursore.

'use strict';

class LavaMenu {

    constructor({ menu, cursor }) {

        this.menu = menu;
        this.cursor = cursor;
        this.items = this.menu.querySelectorAll('li');
        this.left = 0;

        if(this.menu !== null && this.cursor !== null && this.items.length > 0) {
            this.init();
        }
    }

    init() {
        const self = this;
        
        self.items.forEach(item => {
            item.addEventListener('mouseover', () => {
                self.hover(item);
            }, true);
        });
    }

    hover(item) {
        this.left = item.offsetLeft;
        this.cursor.style.left = this.left + 'px';
    }

    
}

Esempio d'uso:

const lavaMenu = new LavaMenu({
    menu: document.querySelector('#navigation'),
    cursor: document.querySelector('#lava-cursor')
}); 
Torna su