I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Come creare un menu semimobile in JQuery

Salve a tutti, oggi vorrei farvi vedere come creare un simpatico effetto di un menu mobile che si fissa in alto quando scrolliamo la pagina web che stiamo visitando. E' un effetto molto usato anche da siti molto famosi che regala un tocco di classe in più alla grafica del nostro sito. Iniziamo con il dire che per realizzarlo nel modo più semplice utilizziamo il framework JQuery in modo da essere più intuitivo possibile. Quindi iniziamo.

Per prima cosa includeremo la libreria jquery.min.js scaricabile dal sito del relativo framework. Fatto questo scriviamo una funzione come quella seguente che cambia alcune proprietà dei css, in particolare la proprietà position impostandola in fixed:

$(function() {

    var nav = $('#nav');

    var navHomeY = nav.offset().top;

    var isFixed = false;

    var $w = $(window);

    $w.scroll(function() {

        var scrollTop = $w.scrollTop();

        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {

            nav.css({

                position: 'fixed',

                top: 0,

                left: nav.offset().left,

                width: nav.width()

            });

            isFixed = true;

        }

        else if (!shouldBeFixed && isFixed)

        {

            nav.css({

                position: 'static'

            });

            isFixed = false;

        }

    });

});

 

Il codice è molto semplice visto che manipola solo alcune proprietà dei css quando si fa lo scroll. Il codice html di un possibile menu potrebbe essere:

<div id="nav">

      <ul>

                    <li><a href="#" class="smoothScroll">Link 1</a></li>

                    <li><a href="#" class="smoothScroll">Link 2</a></li>

                    <li><a href="#" class="smoothScroll">Link 3</a></li>

                    <li><a href="#" class="smoothScroll">Link 4</a></li>

       </ul>    

</div>

L'effetto è molto semplice e potete vedere un piccolo demo qui. Questa è solo una delle possibili implementazioni base ma se ne possono fare molte altre masticando un po' di javascript e JQuery.

I più letti

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento