YAMM3 - Bygg Megamenu For Bootstrap 3

Det er mange fordeler ved bruk av megamenu på en nettside. Med megamenu kan du ta full kontroll over menyen din . Nesten alle webelementer kan tildeles der. Noen gode selskaper har selv brukt megamenu på deres nettside. Amazon og Mashable for eksempel. Amazon har en bildebakgrunn i menyen, og Mashable bruker bildeminiatyr for en mer attraktiv meny.

Hvis du har jobbet med Bootstrap, kan du nå bygge en megamenu på et øyeblikk med dette splitter nye biblioteket Yamm fra Geedmo.

Yamm3 ( Yet Another Megamenu ) er et CSS bibliotek for å hjelpe deg med å bygge en megamenu i Bootstrap 3 enkelt. Megamenu fungerer for både responsive og faste layouter . Den dekker nesten alle bootstrap-elementene som skal inkluderes i navbar som bilde, trekkspill, liste, rutenett, tabell, skjema og så videre.

Grunnleggende veiledning

Yamm3 bruker lett og rent CSS. For å komme i gang med Yamm3 må du bare inkludere den Yamm3-klassen du trenger i standard navbar HTML-oppslag.

Før du arbeider med Yamm3, er det første trinnet å inkludere Yamm3- og Bootstrap-stilarkbiblioteket i hovedenheten som følger:

 ...  ... 

Og ikke glem å også inkludere jQuery og Bootstrap biblioteket i prosjektet ditt, enten i hodet eller kroppsdelen, slik som:

 ... ... 

Vær oppmerksom på at vi bruker Bootstrap 3 her, og den minste jQuery-versjonen som kreves er versjon 1.9.0+ . Hvis du fremdeles kjører på den forrige Bootstrap-versjonen, anbefaler vi at du følger veilederen til den forrige Yamm-versjonen.

HTML Markup

I grunnleggende bruk, for å bruke Yamm3, legger du først til .yamm klassen øverst på navbar-markeringen. Deretter kan du legge til menyoppslaget i .dropdown-menu . Følgende er et grunnleggende eksempel.

Som vist der, kan du også bruke .yamm-content som et alternativ for å pakke inn innhold med utfylling.

For eksempel, la oss prøve å legge til en trekkspill-meny inne i navigeringsnavnet. Erstatt menyen din Her kommer du til kommentarer med følgende kode.

Accordion Group Item # 1 
 Dette er sammenleggbar meny. 
Accordion Group Item # 2 
 Dette er sammenleggbar meny. 

Ved å ringe accordion ID og bruke en panel-group klasse for gruppering, er du i stand til å lage et trekkspill inne i navbaren. Og så vil vår meny se ut som skjermbildet nedenfor:

Det er mange andre komponenter du kan legge til i navlen. Selvutforskning av andre komponenter du kan implementere, kan gjøres hvis du laster ned Yamm3-komplett arkiv og åpner index.html-filen med din favorittkodeditor.

Javascript script~~POS=HEADCOMP

Det er en ekstra javascript kode som brukes til å forhindre en uventet lukket meny i enkelte komponenter som trekkspill, skjemaer, osv. Bare inkluder følgende kode i hodet eller kroppsdelen:

Konklusjon

Yamm3 er et annet flott tredjeparts produkt for å øke din Twitter Bootstraps utvikling når du bygger en attraktiv navbar. Du trenger bare en liten innsats i å utforske alle implementeringskomponenter, da det mangler dokumentasjonsstøtte for å opprette ulike komponentmeny .

Del din mening med oss ​​i kommentarfeltet nedenfor.

Er du sikker på at du bør være en freelance designer?

Denne artikkelen er en del av vår "Guide to Freelancing Series" - som består av guider og tips for å hjelpe deg med å bli en bedre selvstendig næringsdrivende. Klikk her for å lese mer fra denne serien. Blir du lei av den daglige grensen av kommersiell kreativitet - må du være kreativ på kommando for en klient med en bestemt ide i tankene? Jeg vet

(Tekniske og design tips)

20 gratis, multifunksjons ikoner du bør legge til

Leter du etter de riktige ikonene for søknaden din? Hva med noen vektorikoner? I dette innlegget har vi samlet 20 multi-purpose ikoner som du kan tilpasse til ditt innfall, så last ned og bruk for ditt neste prosjekt.Best av alt, du kan bruke dem alle gratis. Du må gå til hver av de forskjellige kildene for å laste ned ikonfeltene skjønt. Alt

(Tekniske og design tips)