Iimenyu ezingama-35 kwi-HTML nakwi-CSS

Imenyu

Kolu ngcelele lwamanqaku no-lIimbono ezikhethiweyo zeCSS, i-HTML kunye nekhowudi yeJavaScript, sihlala sabelana ngeziphumo zombhalo, iintolo, izihloko okanye izilayida ekugxininisa kuyilo lwewebhusayithi yethu ukuze ibe ntle ngakumbi okanye ikwazi ukongeza ixabiso kumxholo esiwubonisayo undwendwe.

Eli xesha lixesha le iimenyu kwi-HTML kunye ne-CSS onokuthi uphile ngayo ngokwaneleyo ezo zinto zibalulekileyo ezisivumela ukuba sikhokele umsebenzisi kwezona ndawo zibalulekileyo zeCommerce yethu, ibhlog kunye nokunye. Sihamba nabo ukuya kunika umgangatho wokuchukumisa kwindawo yethu kwaye kungoku nje kunokwenzeka kwimigangatho yoyilo lwe-UI.

Imenyu yesilayidi yekhodiyidi

IHamburger

Un isilayidi menu okanye imenyu yehamburger esecaleni iqulathe oopopayi nobabalo kunye nomnwe omncinci wokusebenza.

Inqaku elidibeneyo:
9 iimenyu zebarbar esecaleni zeCSS ongenakuphosa

I-Swanky ecocekileyo yeCSS yehla

Swanky

I-Swanky Lil yehla uManu V2.0 es imenyu igcwalise i-CSS emsulwa enexabiso elongeziweyo lokuba akukho khowudi yeJavaScript kujongano lomsebenzisi. Eyona nto ilunge kakhulu kukudityaniswa kwayo ukufumanisa ubuhle obukhulu.

Imenyu yeAccordion

Inkcazo

Este imenyu yekodiyoni es ilula kakhulu ukuba siyithelekisa nezimbini ezidlulileyo nge-HTML, JS kunye neCSS.

Inqaku elidibeneyo:
I-16 yokudlula kwiimenyu ze-CSS zokuhlaziya iwebhusayithi yakho

Imenyu ethe nkqo ene-jQuery kunye ne-CSS3

Inkomfa yenkalo

Un Imenyu ethe nkqo ene-jQuery kunye ne-CSS3 de ukuchukumisa kakhulu usetyenziso okanye iwebhusayithi. Zonke iintlobo zotshintsho kunye neegradients ezinezithunzi ezincinci.

ISETYHULA menu

ISETYHULA navigation

Un imenyu setyhula de ukukhangela kwezilingo esebenza ngokugqibeleleyo kwiwebhusayithi yezobuchwephesha. Yenziwe kwi-SVG kunye nePlatform yoPhiliso yeGreenSock, eyahlukileyo ngaphandle kwamathandabuzo.

Imenyu yeradial

Umhlanga

Okunye Imenyu yeradial kunye novavanyo elisebenza ngokuchanekileyo iphepha elungiselelwe umdlalo.

ISetyhula CSS imenyu ye-HTML

Setyhula

Un Imenyu ejikelezayo yeCSS HTML ukuyibeka kamva kwaye ivula isetyhula ngamava omsebenzisi omkhulu.

Umxholo wemenyu yokukhala

Amakhonkco

Kule nto imenyu yomsesane Los amakhonkco zibekwe kakuhle kwinxalenye ephezulu nganye ukwenza amakhonkco ahlukeneyo.

Iintyatyambo ziyavela kwimenyu

intyatyambo

Okunye okhethekileyo imenyu ezivelelayo oopopayi abasetyenziswe kakuhle kakhulu abavelisa isiphumo esihle.

Ukuphinda ujikeleze ukuHamba Nav

Phindisa

Ukuphinda ujikeleze ukuHamba Nav Yiyo umgangatho ophezulu wokuhla kwemenyu yezoopopayi ezibonisa ngokugqibeleleyo ubume bomxholo wewebhu.

Ukuhla usenyuka

CSS

Un imenyu ukulahla ukuhamba iyafana neyangaphambili nangona inezinye iitintshi kuyilo lojongano.

Imenyu ehlambulukileyo yokuhla kweCSS

I-CSS elula

Okunye imenyu yokwehla komgangatho kwiCSS elandela imigangatho yoyilo yangoku ye-UI.

Imenyu ephendulayo nelula

Ukuphendula ngokulula

Isikrini esigcweleyo, le imenyu ephendulayo nelula kwi-HTML5 kunye ne-CSS3 iyahambelana ne-Internet Explorer 11.

Imenyu epheleleyo yesikrini kwi-SVG

Imenyu epheleleyo ye-SVG

Un imenyu epheleleyo yesikrini kwi-SVG ibekwe ecaleni kwihambhega kwaye itsala amehlo kakhulu.

Imenyu yeMega CSS

Imenyu yeMega

Un Imenyu yeMega kwiCSS nakwi-HTML eyahlukileyo kwinto ebonwayo, enesimbo sangoku nesincinci.

Omnye uMxholo weMenyu

Umxholo wemenyu

Omnye uMxholo weMenyu lolona khetho lufanelekileyo ukuba ujonge imenyu eyahlukileyo neyantlandloloLe yinto entle enkosi kwimenyu yesiko kwi icon kunye noopopayi abenziwe ngobuhlungu.

Imenyu yoyilo lwezixhobo

imathiriyeli

Imenyu yoyilo lwezixhobo ngayo isekwe kulwimi loyilo lukaGoogle. 

Imenyu yeselfowuni yeBurger

Burger

Un Imenyu yehamburger iselfowuni elungiselelwe Kwaye yenziwe nge-HTML, CSS kunye neJavaScript.

Velocity.js isikrini esigcweleyo esiguqukayo

Velocity

Velocity.js isikrini esigcweleyo esiguqukayo Imenyu ye umgangatho omkhulu kwisiphumo esifezekisiweyo kunye namava ayo phantse awodwa omsebenzisi. Isikrini esipheleleyo se-flexbox esine velocity.

Iphepha elipheleleyo kwi-canvas

Iphepha elipheleleyo

Iphepha elipheleleyo kwi-canvas ngumgangatho ophezulu, imenyu epheleleyo yesikrini esebenza ngokugqibeleleyo ukubonisa uyila njani iwebhusayithi ngaloo maxabiso.

Ukuhambisa umgca wokusebenza kwemenyu yokuhambisa phezulu

Hover

Un hover imenyu ukusebenza komgca okulula kwaye intle kakhulu.

Umxholo wemenyu ye-CSS yendlela yemifanekiso

Umxholo weMenyu yeCSS

Enye ingcinga imenyu ene-clip-path Inendawo yokuhambisa into enomdla kakhulu kunye nezinye iindidi zoopopayi.

Ukuhambahamba ngokuhambahamba ngomgaqo

Ukubetha

Ukuhambahamba ngokuhambahamba ngomgaqo yenye imenyu hover yamakhonkco onomdla iziphumo.

Imenyu yeLavalamp CSS

ILavalamp

Imenyu yeLavalamp CSS iqulethe a hover oopopayi kunxibelelwano ngalunye ozibophelela ekuguqukeni.

Isilayida sokuhambisa

Isilayidi esicocekileyo

Un isilayida sokuhambisa eskrolela kwikhonkco ngalinye Ukwahlula ngombala obomvu kunye noopopayi obakhathalelwe kakuhle beziphumo ezilungileyo.

Ukuhamba kwemenyu yefowuni

Imenyu yefowuni

Un Ukuhamba kwemenyu ye-burger zempembelelo enkulu ejolise kwizixhobo eziphathwayo.

Ingcinga yemenyu ye-IP ye-X

iPhone X

 

Un imenyu eyilelwe i-iPhone X onokunika iwebhusayithi yakho ukuba umgangatho wokuchukumisa ukutshatisa uyilo lwefowuni yeApple.

Yandisa imenu esezantsi yeselfowuni

Submenu yandisa

Yandisa imenu esezantsi yeselfowuni yenzelwe i i-footer kunye noopopayi abahle kunye nokufuduka okufanelekileyo kakhulu. Ubungangamsha kuwo onke amanqanaba ujongano lweselfowni yakho okanye iwebhusayithi.

Ukuhamba ngenqwelomoya okuhambayo

Ngokuphilayo

Okunye Imenyu yoopopayi yeselfowuni ngemvelaphi yoopopayi ejikelezayo yesiphumo esihle esibonakalayo.

Imenyu ngokuskrola kunye nefuthe lokuhambisa phezulu

Skrolela ukuhambisa phezulu

Okunye umphumo omkhulu kwimenyu eyahlukileyo kunye ne-quirky. bucala ngasekhohlo imenyu ngokuskrola kunye nefuthe lokuhambisa phezulu ilungele iivenkile zokutyela, uphononongo kunye nokunye.

Imenyu yokuhluza eselfowuni

lokucoca ulwelo

Un imenyu yecebo lokucoca ulwelo iguqulelwe kuhlobo lwewebhu kwaye ijolise kwiselfowuni.

Ukuhamba ngaphandle kwe-canvas

Ngaphandle kwelaphu

Ukuhamba ngaphandle kwe-canvas Yimenyu ethi linga ngotshintsho kunye nokuhamba ukubakhona ngoku. Ukuba ujonga into entsha oza kumangaliswa ngayo, inqanaba layo lelona luhlu.

I-CSS efihliweyo kwimenyu esecaleni

Imenyu efihliweyo

Un Imenyu esecaleni kwiCSS yintoni efihliweyo kwaye ke iyavela nge icon yehambhega.

Ibar esecaleni yolungelelwaniso

Obungatshintshiyo

Sebenzisa bootstrap endaweni ye-flexbox ukuxhasa IE9 / 10. Enye imenyu efanelekileyo kakhulu Ibar esecaleni yolungelelwaniso ngokwengcinga yayo.

Itheyibhile yokuhleba

Uku Morphing

Itheyibhile yokuhleba yimenyu okwehlayo okwenzeka xa ucinezela kwiqhosha lesitshixo esikhulu.


Umxholo wenqaku uyabambelela kwimigaqo yethu imigaqo yokuziphatha yokuhlela. Ukuxela impazamo cofa apha.

Izimvo ezi-2, shiya ezakho

Shiya uluvo lwakho

Idilesi yakho ye email aziyi kupapashwa. ezidingekayo ziphawulwe *

*

*

  1. Uxanduva lwedatha: UMiguel Ángel Gatón
  2. Injongo yedatha: Ulawulo lwe-SPAM, ulawulo lwezimvo.
  3. Umthetho: Imvume yakho
  4. Unxibelelwano lwedatha: Idatha ayizukuhanjiswa kubantu besithathu ngaphandle koxanduva lomthetho.
  5. Ukugcinwa kweenkcukacha
  6. Amalungelo: Ngalo naliphi na ixesha unganciphisa, uphinde uphinde ucime ulwazi lwakho.

  1.   Javier sitsho

    Molo ndifumana amamenyu ahlukileyo afumanekayo kweli phepha anomdla kakhulu, umbuzo wam uyifaka njani iifayile zejs kwimenyu? amatyeli aliqela ndizamile ukwakha nayiphi na imenyu ene-js engasebenziyo, okanye engakwaziyo ukuyifaka, ekuhloleni izinto zesikhangeli ithi umsebenzi obonakala kuqala awuchazwanga kwaye ke ngawo onke amamenyu

  2.   Eduardo sitsho

    Igalelo elihle kakhulu :)