16 waterval spyskaarte in CSS om u webwerf op te knap

JQuery-menu

Uittreksels of aftrekkieslyste is noodsaaklik vir bykans enige soort webwerf. Veral diegene wat die bekendstelling van data deur die besoeker benodig, soos iets so eenvoudig soos om die geslag te kies of om te kies watter kleur die hemp is wat u op die punt staan ​​om in ons e-handel te koop.

Oorvloedige spyskaarte is ander elemente wat ons op ons webwerf kan bywerk om aan die huidige standaarde vir webontwerp te voldoen. Daardie aanraking en die subtiliteit wat meer kwaliteit sal toevoeg tot die hele webomgewing wat ons vir ons webwerf voorberei het. Jy bekendstelling van 16 waterval spyskaarte in CSS Dit sal handig te pas kom om u webwerf te vernuwe. Ons onthou dat sommige ook 'n bietjie JavaScript sal hê, en sonder om die nodige HTML ook te vergeet.

Waterval spyskaart

Pasgemaakte waterval-spyskaart

Hierdie waterval of aftreklys bestaan ​​uit HTML, CSS en JavaScript. Alhoewel die JavaScript-kode baie kort is. Dit volg die huidige materiaalontwerpstandaard as 'n ontwerptaal om 'n eenvoudige en reguit watervalanimasie met opvallende teenwoordigheid te bevat. Wanneer u die verskillende menuopsies open, is daar 'n grafiese sweefeffek wanneer ons die muiswyser daaroor laat.

Keuselys met jQuery

JQuery-menu

Hierdie waterval-menu is redelik eenvoudig, maar dit is baie elegant van ontwerp. Dit het ook 'n hover om die blou tint van elke spyskaart te beklemtoon en 'n waterval animasie sonder veel fanfare. Dit word gemaak met HTML, CSS en JavaScript (jQuery).

Styl waterval spyskaart

Streep-menu

Hierdie keuselys in HTML, CSS en JavaScript is geïnspireer deur een van die beste ontwerpte webwerwe: Stripe (die digitale kaartdiens). Daar is geen sweef oor die menu's nie, maar 'n uitstekende animasie om ons bedoelings oor die ontwerp van ons webwerf duidelik te maak. Noodsaaklik vir die kwaliteit daarvan en ideaal om die spyskaarte van u webwerf te vernuwe.

Geanimeerde waterval-menu

Animasie vertraging menu

Hierdie aftrekkieslys probeer die gebruik van die vertraagde animasie van elk van die elemente wat verskyn as u die muisaanwyser in elke menu laat. Met 'n paar tiendes vertraging word daardie vertragingseffek bereik wat dit 'n baie spesiale aanraking gee.

Afkieslys-effekte

Suiwer CSS-menu

Asof a reeks kaarte vanaf 'n dek, die animasie van hierdie waterval-spyskaart is baie spesiaal daarvoor. 'N Uitstekende waterval-effek wat suiwer CSS is. U weet reeds wat u moet doen om dit op u webwerf te implementeer.

Waterval-animasie in die menu

Animasie waterval menu

'N Keuselys treffend deur animasies en vir daardie blou kleur wat uitstaan. Met die vervaag en in, verskyn die animasie wat die verskillende gedeeltes van die spyskaart laat verskyn. Gemaak in HTML, CSS en JavaScript.

Met 'n bietjie jQuery: Waterval-menu

Terugkieslys

'N Persoonlike en baie bondige keuselys waarna dit ontbreek nie aan enige soort detail nie. Miskien is die eenvoud daarvan die beste en slegste punt. Dit hang af van wat u nodig het vir u webwerf en u strewe. Baie CSS en 'n bietjie JavaScript.

Elegante waterval-spyskaart

Cascada

As ons in die vorige een of ander animasie en 'n beter ontwerp mis, kies hierdie keuselys dit moet alles in CSS gemaak word en JavaScript. Die animasie en die oranje skadu-effek is opvallend elke keer as ons die muiswyser oor elk van die afdelings laat. Een van die beste op die lys.

Keuselys in CSS

CSS-menu

Un minimalistiese waterval-spyskaart en dat dit suiwer in CSS ontwerp is. Eenvoudige animasie, maar goed gedoen om nie uit te staan ​​nie. 'N Spyskaart wat ongemerk bly en wat die huidige ontwerpstandaarde volg.

Terugkieslys

Suiwer CSS-keuselys

Hierdie suiwer CSS-kaskademenu is 'n ander goed onderskei deur animasie wat voorkom elke keer as ons op 'n spyskaart klik. Die animasie skuif die venster van die regte kant af met perfekte tydsberekening. Nog een van die interessantste op die hele lys.

Eenvoudige waterval spyskaart

Eenvoudige waterval spyskaart

Hierdie menu is eenvoudig en bestaan ​​uit HTML en CSS. Dit is nog een van die menu's wat ons toelaat om die belangrike element van ons webwerf en dit by te werk gee nie baie kantte nie. Ek dink dit word goed verstaan ​​wat ons daarmee bedoel.

Horisontale spyskaartnavigasie

Horisontale spyskaart

Alhoewel dit reeds is om te ontmoet sy 4 jaar, hierdie waterval-menu lê op 'n redelik kreatiewe manier die een reg langsaan. As u iets anders soek, kan u dit uit die lys kies.

Keuselys in CSS

Watervalle spyskaart

Nog 'n spyskaart suiwer in CSS en dit dit is nogal kleurvol, ten minste in die aanpassing wat in die voorbeeld gegee word. Met plat kleure onthul die animasie 'n rollende luik-effek wat die verskillende afdelings van die gekose spyskaart laat val. Nog een van die nuuskierige waterval-spyskaarte op die lys met 'n goed gekose tema.

Waterval-spyskaart met klein JS

CSS-keuselys

Hierdie keuselys gebruik baie min JavaScript, genoeg om die menu outomaties te sluit as ons na iets anders oorgaan. Is tydsberekening goed bereik in die effek van animasie om een ​​van die beste in hierdie verband te word.

Nog 'n suiwer CSS-menu

Uitsit-koppelvlak-menu

N waterval menu met animasies waarin daar is skaars 'n vertraging van duisendstes tweede. Dit lewer dus die effek van onmiddellikheid op die besoeker op. Hover-effek en 'n interessante aftrekkieslys sonder veel fanfare op algemene vlak.

Cascade menu zig zag konsep

Zig zag menu

As u in hierdie boodskap na 'n ander menu soek as die volledige lys, bevat hierdie keuselys alles waarna u kan soek. Die animasie wat geproduseer word, is sigsag om 'n ander soort ervaring 'n bietjie eksperimenteel aan te bied. Dit kan perfek inpas by 'n videospeletjie-tema, dus as u 'n kliënt het wat na iets anders soek, is dit sekerlik die geskikste van die hele lys. Sy skuins vorms en vinnige animasie sê alles.

Ons laat jou by hierdie reeks CSS-menu's vir u webwerf wat 'n groot aantal daarvan het.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.