16 cascading CSS menu upang mabago ang iyong website

Menu ng JQuery

Ang mga menu ng cascading o dropdown ay mahalaga para sa halos anumang uri ng website. Lalo na ang mga nangangailangan ng pagpapakilala ng data ng bisita, tulad ng isang bagay na kasing simple ng pagpili ng kasarian o pagpili ng anong kulay ang magiging shirt na bibilhin mo sa aming eCommerce.

Ang mga menu ng Cascading ay iba pang mga elemento na maaari naming i-update sa aming website upang sundin ang kasalukuyang pamantayan sa disenyo ng web. Ang pagpindot na iyon at ang kahusayan na magdaragdag ng higit na kalidad sa buong kapaligiran sa web na inihanda namin para sa aming website. Ikaw nagpapakilala ng 16 na menu ng cascading sa CSS darating ito sa madaling gamiting para sa iyo upang i-update ang iyong website. Naaalala namin na ang ilan ay magkakaroon din ng kaunting JavaScript, at nang hindi nakakalimutan ang kinakailangang HTML na rin.

Waterfall menu

Pasadyang menu ng talon

Ang menu ng talon o dropdown na ito binubuo ng HTML, CSS at JavaScript. Kahit na ang JavaScript code ay napaka-ikli. Sinusundan nito ang kasalukuyang pamantayan sa Disenyo ng Materyal bilang isang wika ng disenyo upang isama ang isang simple at prangka na talon ng animasyon na may nakakaakit na presensya. Kapag binubuksan ang iba't ibang mga pagpipilian sa menu, mayroong isang graphic hover effect kapag naiwan namin ang mouse pointer sa kanila.

Dropdown menu na may jQuery

Menu ng JQuery

Ang menu ng talon na ito ay medyo prangka, ngunit ito napaka-elegante sa disenyo. Mayroon din itong isang hover upang bigyang-diin ang asul na kulay ng bawat menu at isang cascading na animasyon nang walang labis na pamaypay. Ginawa ito sa HTML, CSS at JavaScript (jQuery).

Menu ng istilong talon

Stripe Menu

Ang dropdown na menu na ito sa HTML, CSS at JavaScript ay inspirasyon ng isa sa pinakamahusay na dinisenyo na mga website: Stripe (ang serbisyo sa digital card). Walang pag-hover sa mga menu, ngunit isang mahusay na dinisenyo na animation upang linawin ang aming mga hangarin tungkol sa disenyo ng aming website. Mahalaga para sa kalidad at perpekto upang mabago ang mga menu ng iyong website.

Animated na menu ng talon

Menu ng pagkaantala ng animasyon

Sinusubukang ipakita ng dropdown menu na ito ang paggamit ng naantala na animasyon ng bawat isa sa mga elemento na lilitaw kapag iniiwan ang mouse pointer sa bawat menu. Sa ilang mga ikasampu ng isang pagkaantala, nakakamit ang pagkaantala ng epekto na nagbibigay dito ng isang napaka-espesyal na ugnayan.

Mga epekto sa dropdown na menu

Purong menu ng CSS

Parang a serye ng mga kard mula sa isang deck, ang animasyon ng menu ng talon na ito ay napaka-espesyal para dito. Isang mahusay na epekto ng talon na purong CSS. Alam mo na kung ano ang dapat mong gawin upang maipatupad ito sa iyong site.

Animasyon ng talon sa menu

Menu ng talon ng animasyon

Isang dropdown na menu kapansin-pansin sa pamamagitan ng mga animasyon at para sa asul na kulay na namumukod-tangi. Sa pamamagitan ng isang fade out at sa animasyon na gumagawa ng iba't ibang mga seksyon ng menu na lilitaw. Ginawa sa HTML, CSS at JavaScript.

Na may isang maliit na jQuery: Waterfall menu

Dropdown menu

Isang isinapersonal at napaka maigsi na dropdown na menu kung saan hindi ito nagkulang ng anumang uri ng detalye. Marahil ang pagiging simple nito ay ang pinakamahusay at pinakapangit na puntong ito. Ito ay depende sa kung ano ang kailangan mo para sa iyong website at iyong mga hangarin. Maraming CSS at kaunting JavaScript.

Eleganteng menu ng talon

Cascada

Kung sa nakaraang isa ay napalampas namin ang ilang animasyon at isang mas mahusay na disenyo, ang dropdown na menu na ito mayroon itong lahat na gagawin sa CSS at JavaScript. Ang animation at ang orange shading effect ay kapansin-pansin sa tuwing iniiwan namin ang mouse pointer sa bawat seksyon. Isa sa mga pinakamahusay sa listahan.

Dropdown menu sa CSS

Menu ng CSS

Un minimalist na menu ng talon at na ito ay dinisenyo pulos sa CSS. Simpleng animation, ngunit mahusay na nagawa upang hindi makilala. Isang menu na hindi napapansin at sumusunod sa mga kasalukuyang pamantayan sa disenyo.

Dropdown menu

Pure dropdown na menu ng CSS

Ang purong CSS cascade menu na ito ay iba pa mahusay na nakikilala sa pamamagitan ng animasyon nangyayari iyon sa tuwing mag-click kami sa isang menu. I-slide ng animation ang window mula sa kanang bahagi na may perpektong tiyempo. Isa pa sa pinaka nakakainteres sa buong listahan.

Simpleng menu ng talon

Simpleng menu ng talon

Ang menu na ito ay simple sa pinagmulan at binubuo ng HTML at CSS. Ito ay isa pa sa mga menu na nagpapahintulot sa amin na i-update ang mahalagang sangkap ng aming website at iyon huwag magbigay ng maraming cante. Sa palagay ko ito ay naintindihan nang mabuti kung ano ang ibig nating sabihin dito.

Pahalang na pag-navigate sa menu

Pahalang na menu

Kahit na ito ay matutupad na ang kanyang 4 na taon, ang menu ng talon na ito ay inilalagay ang isa sa tabi mismo nito sa isang medyo malikhaing paraan. Kung naghahanap ka para sa isang bagay na naiiba, ito ay isa pang isa na maaari mong mapili mula sa listahan.

Dropdown menu sa CSS

Menu ng Waterfalls

Ang isa pang menu na panay sa CSS at iyon medyo makulay ito, hindi bababa sa pagpapasadyang ibinigay sa halimbawa. Sa mga patag na kulay, ipinapakita ng animation ang isang rolling shutter effect na bumabagsak sa iba't ibang mga seksyon ng napiling menu. Isa pa sa mga usyosong menu ng talon sa listahan na may napiling mahusay na tema.

Waterfall menu na may maliit na JS

CSS dropdown menu

Gumagamit ang dropdown na menu na ito ng napakakaunting JavaScript, sapat na upang awtomatikong isara ang menu kapag lumipat kami sa iba pa. Ay tamang pagkamit ng tiyempo sa epekto ng animasyon upang maging isa sa mga pinakamahusay sa bagay na ito.

Isa pang purong CSS cascading menu

Menu ng dropdown interface

Isang cascading menu na may mga animasyon kung saan may ay hindi isang pagka-antala ng libu-libo pangalawa Kaya gumagawa ito ng epekto ng pagiging madali sa bisita. I-hover ang epekto at isang kagiliw-giliw na dropdown na menu nang walang labis na pagpapalabas sa isang pangkalahatang antas.

Konsepto ng menu ng Cascade zig zag

Zig zag menu

Kung naghahanap ka para sa isang menu bukod sa buong listahan sa post na ito, ang dropdown na menu na ito ay mayroong lahat ng maaari mong hanapin. Ang ang animasyon na ginawa ay zigzag upang mag-alok ng isa pang uri ng karanasan ng kaunting pang-eksperimentong. Maaari itong ganap na magkasya sa isang tema ng video game, kaya kung mayroon kang ilang uri ng kliyente na naghahanap ng kakaiba, tiyak na ito ang pinakaangkop sa buong listahan. Ang mga pahilig na hugis at mabilis na animation ay sinasabi ang lahat.

Naiiwan ka namin ang seryeng ito ng mga menu ng CSS para sa iyong website na kung saan ay may isang malaking bilang ng mga ito.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish.

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.