La creazione di menu creativamente diversi a volte è piuttosto difficile quando non hai una buona idea o ispirazione. Ma questo tipo di problema può essere risolto cercando altri design di menu di ispirazione o con l’aiuto di strumenti. In questa materia, jQuery.Mmenu si presenta come uno strumento piuttosto utile.

jQuery.Mmenu è un plug-in jQuery facile da usare per la creazione di menu di navigazione a scorrimento per app mobili nel tuo sito web. Questo elegante menu creativo porterà un’esperienza utente più bella e ordinata.

Iniziare

Per iniziare jQuery.Mmenu, vai alla pagina di download e il plug-in verrà scaricato automaticamente. In questo post cercheremo di costruire un menu di base.

Proprio come altri plugin jQuery, per usarlo devi includere le dipendenze richieste al tuo sito. Quelli sono jQuery, jquery.mmenu.js e jquery.mmenu.css. Lo snippet è il seguente:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

E questo dovrebbe essere sufficiente per creare un menu di base con tutte le funzionalità e lo stile. Su funzionalità più avanzate ed extra, è necessario includere file JS e CSS aggiuntivi.

Creazione di A Menu

Creiamo il menu di base come di solito lo crei con il nav, ul, li e a elementi. In questa demo creeremo un menu orizzontale che ha tre sottomenu e anche tre sottomenu, in questo modo.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

Nel menu sopra, abbiamo incluso il nav con un ID menu che verrà utilizzato come riferimento alla funzione jQuery.mmenu. Quindi chiama il plugin con il javascript funzione e includi l’id in questo modo.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

Nel tag LI, puoi vedere una classe denominata Selected, questa classe è utile per rendere il menu selezionato predefinito all’inizializzazione. Puoi anche aggiungere la tua classe (ad es active), ma assicurati di includerlo nella sezione di configurazione, in questo modo.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Questo plugin ha aggiunto automaticamente i collegamenti di chiusura e apertura del sottomenu, quindi non è necessario crearli. Il nostro menu dovrebbe assomigliare a questo.

Conclusione

jQuery.mmenu ti offre un’ottima soluzione per creare menu diversi nel modo più semplice possibile. Puoi anche creare altri elementi interattivi con questo plug-in, ad esempio puoi creare una descrizione comando scorrevole e una barra di notifica per il sito mobile.

jQuery.Mmenu può essere personalizzato anche per un utilizzo anticipato. Ad esempio, puoi creare un elenco di contatti simile a un dispositivo mobile nel tuo sito combinando i suoi temiestensione, componente aggiuntivo (etichette, contatori, intestazione, trascinamento e campo di ricerca) e posizionamento.

Se hai trovato l’articolo Creazione di menu scorrevoli con facilità utilizzando jQuery.mmenu utile, condividilo con i tuoi amici. Ci vediamo nei prossimi post. Seguire driveria.net per ricevere gli ultimi aggiornamenti!