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.

Bygg fargede CTA med en gratis graderings knapper bibliotek

Hver flott hjemmeside trenger en sterk CTA-knapp (CTA). Dette veileder besøkende til hvilken handling de vil at de skal ta, om det er påmelding for en ny konto eller å kjøpe noe fra din e-handelsbutikk.Men du trenger ikke lage CTAer fra grunnen av . Du kan enten gå for dusinvis av egendefinerte CSS3 knapper over hele nettet eller bruke et lignende verktøy som kan gjøre tingene enklere for deg.Et ver

(Tekniske og design tips)

15 Multipurpose WordPress-temaer for webdesignere

Det er anledninger når du foretrekker å stole på et spesialdesignet WordPress-tema. Et par eksempler er gitt her. Men de mange formålstemaene som er beskrevet i denne artikkelen er spesielle. De vil nesten alltid produsere resultater du vil være stolt av.Det hevdes noen ganger at flerbrukstemaer generelt gir gode resultater. Men

(Tekniske og design tips)