Selles artiklite seerias, mis sisaldab valitud CSS-i, HTML-i ja JavaScripti koodi loendeid , jagame tavaliselt tekstiefekte, nooli, päiseid või liugureid, mille abil rõhutada meie veebisaidi kujundust, muuta see elegantsemaks või lisada külastajale esitatavale sisule väärtust.
Seekord keskendume HTML- ja CSS-menüüdele, mis võimaldavad teil õigesti animeerida neid olulisi elemente, mis juhatavad kasutajaid teie e-kaubanduse saidi, ajaveebi ja muu kõige olulisemate osade juurde. Uurime neid lähemalt, et anda teie saidile ihaldatud kvaliteet ja tagada, et see oleks võimalikult ajakohane praeguste kasutajaliidese disaini standarditega.
Akordioni slaidimenüü
Hamburgeri stiilis slaidimenüü või külgmenüü , mis koosneb minimalistliku hõnguga graatsilistest animatsioonidest suurepärase efekti saavutamiseks.
Räpane puhas CSS
Swanky Lil Drop Down Manu V2.0 on täielik ja puhas CSS-menüü , mille lisaväärtuseks on see, et kasutajaliideses puudub JavaScripti kood. Selle lisamine on lihtsalt suurepärane ja lisab menüüle elegantsi.
Akordionimenüü
See akordionmenüü on kahe eelmisega võrreldes üsna lihtne , kasutades HTML-i, JS-i ja CSS-i.
Vertikaalne menüü jQuery ja CSS3-ga
Stiilne vertikaalne menüü , mis on loodud jQuery ja CSS3 abil rakenduse või veebisaidi jaoks. Sisaldab igasuguseid üleminekuid ja gradiente minimalistlike varjudega.
Ringmenüü
Eksperimentaalne ümmargune navigeerimismenüü , mis sobib ideaalselt tehnilise veebisaidi jaoks. See on valmistatud SVG-s ja GreenSock Animation Platformil ning on vaieldamatult omanäoline.
Radiaalmenüü
Veel üks radiaalne ja eksperimentaalne menüü , mis sobib ideaalselt mängule mõeldud lehele.
Ringikujuline CSS HTML-i menüü
Ümmargune CSS HTML-menüü , mis asetatakse suurepärase kasutuskogemuse tagamiseks ringikujuliselt avatavale küljele .
Helina menüü kontseptsioon
Selles rõngamenüüs on lingid iga rõnga ülaosas, et luua erinevaid rõngaid.
Lille hüpikmenüü
Veel üks ainulaadne hüpikmenüü väga hästi rakendatud animatsiooniga, mis loob suurepärase efekti.
Rekursiivne hõljuk Nav
Rekursiivne hõljuva navigeerimise funktsioon on kvaliteetne rippmenüü tänu oma animatsioonidele, mis näitavad ideaalselt veebisaidi sisu struktuuri.
Rippmenüü navigeerimine
Eelmisega sarnane rippmenüü , millel on liidese kujunduses erinevad nüansid.
Rippmenüü Pure CSS
Veel üks kvaliteetne CSS-i rippmenüü , mis järgib praeguseid kasutajaliidese disaini standardeid.
Tundlik ja lihtne menüü
Täisekraanirežiimis on see reageeriv ja lihtne HTML5 ja CSS3 menüü ühilduv Internet Explorer 11-ga.
Täisekraanimenüü SVG-s
Küljele paigutatud hamburgeri stiilis täisekraaniline SVG menüü , mis on väga pilkupüüdev.
Megamenüü CSS
CSS-i ja HTML-i megamenüü, mida pole varem nähtud, moodsas ja minimalistlikus stiilis.
Teine menüükontseptsioon
Teine menüükontseptsioon on ideaalne valik, kui otsite teistsugust ja originaalset menüüd ; see on lihtsalt suurepärane tänu kohandatud menüüikoonile ja hoolikalt loodud animatsioonile.
Materjali kujundamise menüü
Materjalidisaini menüü põhineb Google'i disainikeelel.
Burgeri mobiilimenüü
Mobiilile optimeeritud hamburgerimenüü, mis on loodud HTML-i, CSS-i ja JavaScripti abil.
Velocity.js täisekraani flexbox
Velocity.js täisekraani Flexbox on erakordse kvaliteediga menüü nii oma visuaalse efekti kui ka peaaegu ainulaadse kasutuskogemuse poolest. Täisekraani Flexbox koos Velocity.js-iga.
Lehekülg väljaspool lõuendit
Täislehe lõuendiväline menüü on kvaliteetne täisekraanimenüü, mis illustreerib suurepäraselt, kuidas nende väärtustega veebisaiti kujundada .
Hõljutage kursori menüü rea efekti
Lihtne ja väga kena jooneefektiga menüü hõljub.
CSS clip-path menüü kontseptsioon
Veel üks klippide menüü kontseptsioon , mis koosneb üsna uudishimulikust hõljumisefektist ja animeeritud kategooriatest.
Läbikriipsutatud kursor
Läbikriipsutatud hõljumine on veel üks hõljutusmenüü linkide jaoks, millel on huvitav tulemus.
Lavalamp CSS-i menüü
Lavalampi CSS-menüü sisaldab iga lingi jaoks hõljuvat animatsiooni , mis lisab dünaamilisust.
Navigeerimisliugur
Navigeerimisslaider , mis liigub iga lingi juurde, paistab silma punase tooni ja hästi läbimõeldud animatsiooniga, mis annab suurepäraseid tulemusi.
Mobiilmenüüs navigeerimine
Ülimalt tõhus navigatsiooniga hamburgerimenüü, mis on suunatud mobiilseadmetele.
IPhone X mobiilimenüü kontseptsioon
iPhone X-ile loodud menüü , mis annab teie veebisaidile kvaliteeditunde, et see sobiks Apple'i telefoni disainiga.
Laienda mobiilseadmete alammenüüd
Mobiilseadmete jaoks mõeldud alammenüü „Laienda“ on loodud jaluse jaoks, pakkudes graatsilist animatsiooni ja sujuvat kerimist. See pakub teie rakenduse või veebisaidi mobiililiidesele elegantsi igal tasandil.
Animeeritud mobiilne navigeerimine
Veel üks mobiilile mõeldud animeeritud menüü ümmarguse animeeritud taustaga, millel on suurepärane visuaalne efekt.
Menüü kerimise ja hõljutamise efektidega
Veel üks suurepärane efekt ainulaadse ja eristuva menüü loomiseks . See kerimis- ja hõljutusefektidega menüü sobib ideaalselt restoranide, arvustuste ja muu jaoks.
Mobiilifiltri menüü
Mobiilifiltri menüü, mis on veebiversiooni jaoks konverteeritud ja mobiilile optimeeritud.
Lõuendiväline navigeerimine
Lõuendiväline navigatsioon on menüü, mis katsetab üleminekute ja navigeerimisega, et tunduda väga moodne. Kui otsid midagi uut ja muljetavaldavat, on see selle nimekirja parimate hulgas.
Peidetud CSS-i külgmenüü
CSS -i külgmenüü , mis on peidetud ja kuvatakse koos hamburgeriikooniga.
Parandatud navigeerimise külgriba
See kasutab IE9/10 toetamiseks Flexboxi asemel Bootstrapi . Veel üks suurepärane menüü tänu fikseeritud navigeerimiskülgribale.
Vahekaart Morphing
Morfimise vahekaart on rippmenüü, mis kuvatakse peamise vahekaardi nupu vajutamisel .