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.

15 parchi giochi Funtastic che ti piacerebbe avere quando eri un ragazzino

Ti ricordi quando eri giovane e amavi penzolare dai bar delle scimmie, giocavi con la sabbia e facevi audaci balzi dalle altalene? I parchi giochi sono luoghi incredibili dove un bambino (o un bambino grande) può sporcarsi e provare le gioie di essere giovani e liberi.Qui, ho messo insieme una selezione di 15 campi da gioco dal design creativo provenienti da tutto il mondo .

(Consigli tecnici e di design)

Idee e tendenze brillanti per la funzionalità principale Post Widgets

Gestire una rivista online di successo richiede un pubblico solido e molta scrittura di alta qualità. Ma il layout della rivista gioca anche un fattore cruciale nel coinvolgimento dei visitatori. Una tecnica è quella di creare un widget di messaggi in primo piano nella parte superiore della home page.

(Consigli tecnici e di design)