16 menu kaskarretan CSSn zure webgunea berritzeko

JQuery menua

Kaskadako edo goitibeherako menuak daude ezinbestekoa ia edozein webgune motarako. Batez ere bisitariak datuak sartzea eskatzen dutenak, hala nola generoa hautatzea edo gure merkataritza elektronikoan erostera zoazen kamisetaren kolorea hautatzea bezain erraza.

Menu kaskatuak gure webgunean eguneratu ditzakegun beste elementu batzuk dira, egungo web diseinuaren estandarrak jarraitzeko. Ukitu hori eta gure webgunerako prestatu dugun web ingurune osoari kalitate gehiago emango dion sotiltasun hori. Zuk CSS-n 16 menu kaskarretan sartuz oso ondo etorriko zaizu zure webgunea berritzeko. Gogoratzen dugu batzuek JavaScript pixka bat ere izango dutela, eta beharrezko HTML hori ere ahaztu gabe.

Ur-jauziaren menua

Ohiko ur jauziaren menua

Ur jauzi edo goitibeherako menu hau HTML, CSS eta JavaScript-ek osatzen dute. JavaScript kodea oso laburra den arren. Uneko Material Diseinuko estandarra jarraitzen du diseinu lengoaia gisa, ur-jauziaren animazio sinple eta zuzena txertatzeko presentziarekin. Menuko aukera desberdinak irekitzean, saguaren erakuslea haien gainean uzten dugunean pasatzearen efektu grafikoa dago.

Goitibeherako menua jQuery-rekin

JQuery menua

Ur jauzi menu hau nahiko erraza da, baina bai oso dotorea diseinuan. Menu bakoitzaren ñabardura urdina areagotzeko eta animazio kaskadatsu bat ere badago, zalaparta handirik gabe. HTML, CSS eta JavaScript (jQuery) bidez egina dago.

Estilo ur-jauziaren menua

Stripe Menua

HTML, CSS eta Javascript-en goitibeherako menu hau da diseinatutako webgune onenetako batean inspiratuta: Stripe (txartel digitalaren zerbitzua). Ez dago menuen gainetik pasatzerik, baina bai bikain diseinatutako animazio bat, gure webgunearen diseinuari buruz ditugun asmoak argi uzteko. Ezinbestekoa kalitateagatik eta ezin hobea zure webguneko menuak berritzeko.

Animatutako ur jauziaren menua

Animazioen atzerapen menua

Goitibeherako menu hau fitxategiaren erabilera erakusten saiatzen da animazio atzeratua menu bakoitzean saguaren erakuslea uztean agertzen diren elementuetako bakoitza. Zenbait hamarren atzerapenarekin, oso ukitu berezia ematen dion atzerapen efektua lortzen da.

Goitibeherako menuko efektuak

CSS menu hutsa

A. Balitz bezala karta sorta sorta batetik, ur jauziaren menu honen animazioa oso berezia da horretarako. CSS hutsa den ur-jauzi efektu bikaina. Badakizu zer egin behar duzun zure gunean ezartzeko.

Ur-jauziaren animazioa menuan

Animazioko jauzi menua

Goitibeherako menua animazioek deigarria eta nabarmentzen den kolore urdin horrengatik. Lausotu eta sartu batera, menuaren atal desberdinak egiten dituen animazioa agertzen da. HTML, CSS eta JavaScript-en egina.

JQuery apur batekin: Waterfall menu

Goitibeherako menua

Zerrendara goitibeherako menu pertsonalizatua eta oso zehatza ez du inolako xehetasunik falta. Agian bere sinpletasuna da bere puntu onena eta txarrena. Zure webgunerako behar duzunaren eta zure nahien araberakoa izango da. CSS asko eta JavaScript pixka bat.

Ur jauzi menu dotorea

Cascada

Aurrekoan animazio batzuk eta diseinu hobea galtzen baditugu, goitibeherako menu hau CSS-n egin beharreko guztia dauka eta JavaScript. Animazioa eta laranja itzal efektua deigarriak dira saguaren erakuslea atal bakoitzaren gainean uzten dugun bakoitzean. Zerrendako onenetarikoa.

Goitibeherako menua CSSn

CSS menua

Un ur jauzi menu minimalista eta CSS hutsean diseinatuta dagoela. Animazio sinplea, baina ondo egindakoa nabarmentzeko ez izateko. Oharkabean pasatzen den menu bat eta egungo diseinu estandarrak jarraitzen dituena.

Goitibeherako menua

CSS goitibeherako menua

CSS kaskadako menu huts hau beste bat da animazioz ondo bereizten da hori menu batean klik egiten dugun bakoitzean gertatzen da. Animazioak leihoa eskuinaldetik irristatzen du momentu ezin hobearekin. Zerrenda osoko interesgarrienetako bat.

Ur jauzi menua

Ur jauzi menua

Menu hau jatorrizkoa da eta HTML eta CSS-k osatzen dute. Gure webguneko elementu garrantzitsu hori eta hori eguneratzeko aukera ematen diguten menu horietako beste bat da ez eman kantutegi handirik. Uste dut ondo ulertzen dela horrekin zer esan nahi dugun.

Menu nabigazio horizontala

Menu horizontala

Dagoeneko elkartzeko bada ere bere 4 urte, ur-jauzi menu honek ondoan dagoena nahiko modu sortzailean estaltzen du. Zerbait desberdina bilatzen baduzu, zerrendatik hautatu dezakezun beste bat da.

Goitibeherako menua CSSn

Ur jauzien menua

CSS hutsean dagoen beste menu bat eta hori nahiko koloretsua da, adibidean emandako pertsonalizazioan behintzat. Kolore lauekin, animazioak aukeratutako menuko hainbat atal jaisten dituen pertsianaren efektua erakusten du. Ondo aukeratutako gaia duen zerrendako ur-jauzi menu bitxietako bat.

Waterfall menua JS txikiarekin

CSS goitibeherako menua

Goitibeherako menu honek JavaScript gutxi erabiltzen du, nahikoa da beste zerbaitetara pasatzean menua automatikoki ixteko. Da ondo egindako denbora animazioaren efektuan zentzu horretan onenetakoa bihurtzeko.

CSS kaskarako beste menu hutsa

Goitibeherako interfazearen menua

Menu kaskatua animazioekin ez da ia milaren atzerapena bigarrena. Beraz, berehalakotasunaren efektua sortzen du bisitariarengan. Pasa ezazu efektua eta goitibeherako menu interesgarria, zalaparta handirik gabe maila orokorrean.

Cascade menu zig zag kontzeptua

Zig zag menua

Mezu honetako zerrenda osoa ez den beste menuren bat bilatzen ari bazara, goitibeherako menu honek bila dezakezun guztia dauka. The sortutako animazioa sigi-saga da beste esperientzia mota bat esperimental xamar eskaintzeko. Bideo-jokoen gaian ezin hobeto sartu liteke, beraz, zerbait desberdina bilatzen duen bezero mota bat baduzu, ziur aski zerrenda osoko egokiena da. Bere forma zeiharrak eta animazio azkarrak dena diote.

Utziko zaitugu zure webgunerako CSS menu sorta hau horietako kopuru handia duena.


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

Idatzi lehenengo iruzkina

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.