11 menus wareega ah ee CSS iyo HTML si loo raaco heerka naqshadeynta websaydhka hadda jira

Waxaan ku sii wadaynaa mid kale Liiska weyn ee meertada wareegsan labadaba CSS sida HTML-ka si aad ula jaanqaadi karto baahiyaha boggaaga. Liisaska wareegtadan ayaa badanaa isku dayaya inay siiyaan menu-ka hamburgerka qaab iyo animations ku meeraysta wareega; sida aysan noqon karin si kale.

Waxaa jira waxyaabo badan oo kala duwan iyo sidoo kale midka ugu fiican ee ah awood u leh inuu siiyo diiradda loo baahan yahay mawduuc gaar ah. Animation iyo qaab muuqaal yar oo muuqaal ah ayaa awood u leh inay siiso soo-booqdayaasha calaamado si ay u ogaadaan inaan indho wanagsan leenahay si aan u siino tayada boggayaga qaabeynta webka Aynu ku sameyno liiska menus ee 11, iyada oo aan marka hore nafsadeena laga qaadin isku xirnaanta liis kale oo liiska CSS ah.

Liiska wareega wareega

Liiskan wareegsan ee wareegsan waxaa laga heli karaa CSS iyo HTML, markaa hirgelintiisu waa wax fudud haddii aad u isticmaasho inaad ku shaqeyso koodh. Ku hibeeyay animation weyn iyo qaabka ugu yar taas oo ka dhigaysa kuwa ugu fiican liiska.

Liiska wareega wareega

Liiskan wareegsan ee dul sabbaynaya ayaa ah qulqulaya JavaScript, iyo sidoo kale HTML iyo CSS. Liis kale oo leh taxane animations ah oo dhex dhigaya kuwa ugu fiican liiskan. Tayo bilaa shaki ah.

Bar wareega wareega

Baarkani wareegtada ah waxaa dhiirrigeliyay Luqadda naqshadeynta Google ee loo yaqaan 'Design Design'. Haddii aad raadineyso qaar ka mid ah luqaddaas, waxay durba qaadaneysaa waqti in lagu dhex daro websaydhkaaga.

Maaddooyinka Wareegtada ah

Liis kale oo wareeg ah oo loogu talagalay Naqshadeynta Waxyaabaha iyo taas ayaa ka dhex muuqda inta kale taxanaha astaamahaas oo si muuqata u muuqda. Garaacid iyo dhameystir dhameystiran; ma ahan wax fiican, laakiin waxay umuuqataa mid fiican.

Liiska wareega

Liiskan waxaa ku qalabeysan animation kaas ballaadhiyo badhanka hamburger si loo muujiyo qeybaha kala duwan ee aad u tagi karto websaydhka halka uu ka kooban yahay.

Liiska Radial-ka ee CSS

Liiskan shucaaca ah waxaa lagu sameeyay CSS iyo HTML. Waa menu muuqaal wareeg ah oo muuqaal ah taxanahaas sawirada ah in muuqan marka gujinaya icon hamburger ah. Waxaa lagu kala soocay keligeed dhinacaas.

Liiska Radial

Mid ka mid ah menusyada ugu hal abuurka badan liiska, oo lagu garto a animation si fiican u shaqeeyay. Xitaa uma baahnid inaad gujiso si aad u aragto qaybaha kala duwan ee menu-gaaga.

CSS Gooey Menu

Liiskani wuxuu adeecayaa nooca animation-ka loo yaqaan Gooey oo sameeya qaybaha kala duwan qulqulka badhanka hamburgerka. Liis wareegsan oo ka duwan inta kale CSS, markaa waxaad diyaar u tahay inaad dhexgaliso websaydhka. A animation firfircoon oo indho-qabad leh ayaa ah waxa ka dhigaya inay runtii ka soo baxdo inta kale.

Menu radial animation

Liiskan wareegtada ahi waa mid fudud, laakiin kama maqna animation caadil ah oo tayo leh. Haa waxay isticmaashaa JavaScript inuu raaco CSS iyo HTML. Guji fudud oo ku yaal astaanta hamburger-ka ayaa furi doonta dhammaan qeybaha si aad ugu wareegi karto iyaga.

Khariidadda wareegga wareegga

Saxaafad gaaban oo ku saabsan astaanta hamburger ayaa si buuxda u furaysa qaybaha kala duwan ballaadhi goobada oo awood u yeelo inaad riixdo mid kasta. Haddii ay leedahay saameyn hover haddii aad hoos u dhigtid jiirka midkoodna, markaa waxay noqoneysaa mid ka xiiso badan tii hore, taas oo xoogaa ka aasaasi ah.

Mashiinka wareega wareega

Kani waa mid ka mid ah liisaska asalka ah ee ugu hal abuurka badan liiska oo dhan. Waa waa la badali karaa waxayna ku xasuusin doontaa taleefan dadkii hore ee ahaa inaan farta u jeedino si aan ugu yeerno lambar kasta. Animation xiiso leh oo loogu talagalay menu wareegsan oo ka dhex muuqda inta kale fikradeeda. Xaqiiqdii waa animation taas oo gaareysa dhammaan saameyntaas, markaa haddii aad raadineyso menu xiiso leh oo xiiso leh mowduuc gaar ah, sida xarun wicitaan, tan ayaa ku habboon.