Come realizzare un menu laterale a più livelli

Menu laterale è uno dei elementi di primissima importanza su un sito web. Oggi vediamo uno dei modi come sia possibile realizzare un menu laterale a tanti livelli utilizzando  script.

Voglio solo richiamare la vostra attenzione sul fatto che stiamo usando trasformazioni 3D, e quindi il menu funziona solo nei browser moderni. Per le versioni precedenti, abbiamo fornito un codice speciale. Stessa cosa ma con JS.

Ecco la struttura HTML del menu:

<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
        <h2 class="icon icon-world">All Categories</h2>
        <ul>
            <li class="icon icon-arrow-left">
                <a class="icon icon-display" href="#">Devices</a>
                <div class="mp-level">
                    <h2 class="icon icon-display">Devices</h2>
                    <ul>
                        <li class="icon icon-arrow-left">
                            <a class="icon icon-phone" href="#">Mobile Phones</a>
                            <div class="mp-level">
                                <h2>Mobile Phones</h2>
                                <ul>
                                    <li><a href="#">Super Smart Phone</a></li>
                                    <li><a href="#">Thin Magic Mobile</a></li>
                                    <li><a href="#">Performance Crusher</a></li>
                                    <li><a href="#">Futuristic Experience</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                        <li class="icon icon-arrow-left">
                            <!-- ... -->
                        </li>
                    </ul>
                </div>
            </li>
            <li><!-- ... --></li>
            <!-- ... -->
        </ul>
    </div>
</nav>
<!-- /mp-menu -->/

Ciascun livello di menu viene avvolto in un contenitore con  classe mp-level.

Per evitare che il menu scorre in altezza, abbiamo usato uno stratagemma, e quindi la struttura della pagina sara la seguente:

<div class="container">
    <!-- Push Wrapper -->
    <div class="mp-pusher" id="mp-pusher">
        <!-- mp-menu -->
        <nav id="mp-menu" class="mp-menu">
            <!-- ... -->
        </nav>
        <!-- /mp-menu -->
        <div class="scroller"><!-- this is for emulating position fixed of the nav -->
            <div class="scroller-inner">
                <!-- site content goes here -->
                </div>
            </div><!-- /scroller-inner -->
        </div><!-- /scroller -->
    </div><!-- /pusher -->
</div><!-- /container -->

E specificiamo i seguenti stili:

html,
body,
.container,
.scroller {
    height: 100%;
}
.scroller {
    overflow-y: scroll;
}
.scroller,
.scroller-inner {
    position: relative;
}
.container {
    position: relative;
    overflow: hidden;
    background: #34495e;
}

Questo ci permettera di mantenere dimensioni del menu su tutta la pagina, anche quando si scorre. In generale, simuliamo una posizione fissa.

E adesso vediamo come si richiama il plug-in:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );

Oppure cosi, se si vuole che i livelli del menu rimangono nelle schede dei menu:

new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
    type : 'cover'
} );

Fonte lezzione: http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/

 

 

Letto 1657 volte