YAMM3 - Costruisci Megamenu per Bootstrap 3

Ci sono molti vantaggi di usabilità nell'utilizzo di megamenu su una pagina web. Con il megamenu puoi avere il pieno controllo del tuo menu . Quasi tutti gli elementi web possono essere assegnati lì. Alcune grandi aziende hanno persino applicato megamenu sul loro sito web. Amazon e Mashable per esempio. Amazon ha uno sfondo di immagine nel loro menu e Mashable usa le miniature delle immagini per un menu più attraente.

Se hai lavorato con Bootstrap, ora puoi creare un megamenu in un attimo con questa nuovissima libreria chiamata Yamm di Geedmo.

Yamm3 ( Yet Another Megamenu ) è una libreria CSS che ti aiuta a creare facilmente un megamenu in Bootstrap 3 . Il megamenu funziona sia con layout reattivi che fissi . Copre quasi tutti gli elementi di bootstrap da includere nella barra di navigazione come immagine, fisarmonica, elenco, griglia, tabella, modulo e così via.

Guida di base

Yamm3 utilizza CSS leggero e puro. Per iniziare con Yamm3, devi solo includere la classe Yamm3 di cui hai bisogno nel markup HTML della barra di navigazione standard.

Prima di lavorare con Yamm3, il primo passo è includere la libreria di fogli di stile Yamm3 e Bootstrap nella sezione head come segue:

 ...  ... 

E non dimenticare di includere anche la libreria jQuery e Bootstrap nel tuo progetto, nella sezione head o body, in questo modo:

 ... ... 

Si prega di notare che qui usiamo Bootstrap 3 e la versione minima richiesta da jQuery è la versione 1.9.0+ . Se si sta ancora utilizzando la versione precedente di Bootstrap, si consiglia di seguire la guida della precedente versione di Yamm.

Markup HTML

Nell'uso di base, per utilizzare Yamm3, aggiungere .yamm classe .yamm nella parte superiore del markup della barra di navigazione. Quindi, puoi aggiungere il tuo markup del .dropdown-menu classe del .dropdown-menu . Il seguente è un esempio di base.

Come visto lì, puoi anche usare il .yamm-content come opzione per avvolgere il contenuto con il padding.

Ad esempio, proviamo ad aggiungere un menu di fisarmonica nella nostra barra di navigazione di markup. Sostituisci il tuo menu Goes Here comment con il seguente codice.

Articolo di gruppo di fisarmonica n 
 Questo è menu comprimibile. 
Articolo n. 2 gruppo fisarmonica 
 Questo è menu comprimibile. 

Chiamando l'id della accordion e utilizzando una classe del panel-group per il raggruppamento, è possibile creare una fisarmonica all'interno della barra di navigazione. E così il nostro menu sarà simile allo screenshot qui sotto:

Ci sono molti altri componenti che puoi aggiungere alla barra di navigazione. L'esplorazione autonoma di altri componenti che è possibile implementare può essere eseguita se si scarica l'archivio completo di Yamm3 e si apre il file index.html con il proprio editor di codice preferito.

Javascript

C'è un ulteriore codice javascript utilizzato per prevenire un menu chiuso inaspettato in alcuni componenti come fisarmonica, moduli, ecc. Basta includere il seguente codice nella sezione della testa o del corpo:

Conclusione

Yamm3 è un altro ottimo prodotto di terze parti per potenziare lo sviluppo di Twitter Bootstrap quando si costruisce una barra di navigazione attraente. Hai solo bisogno di un piccolo sforzo per esplorare tutti i componenti di implementazione, in quanto manca il supporto della documentazione per la creazione di vari menu di componenti .

Condividi la tua opinione con noi nella sezione commenti qui sotto.

Tutto ciò che devi sapere su OnePlus One

Negli ultimi anni il gioco per smartphone è stato dominato dagli stessi vecchi nomi: Samsung e Apple, oltre a una serie di altri produttori come LG, HTC, Sony e Motorola in tutto il mondo in termini di vendite e popolarità. Bene, recentemente un nuovo telefono sta facendo il suo debutto, scuotendo il settore, come abbiamo imparato a conoscerlo.

(Consigli tecnici e di design)

Suggerimenti e strumenti per migliorare la produttività del team di progettazione

Di solito anche un team produttivo è ben gestito. Le due parole chiave che vedete qui sono "produttive" e "gestite", quindi non sorprende che i team di progettazione siano sempre alla ricerca di migliori suggerimenti di produttività e principi di gestione a cui possano attenersi comodamente.A

(Consigli tecnici e di design)