Sådan opbygges en glidende menulinje ved hjælp af HTML, CSS og JavaScript

En menu er det, du ser efter, når du lander på et websted. Det har muligheder og giver dig adgang til alt, hvad webstedet har at tilbyde dig. Du vil helt sikkert sige, at det er en vigtig del af et websted, ikke?

Min ven Girish patil og jeg startede et nyhedsbrev hver uge for frontede udviklere denne måned. Det første nyhedsbrev indeholder glidende menubjælker, og her skriver jeg om, hvordan vi byggede det.

Inden vi begynder, skal du få en container på plads til hele din webside og designe bredden og højden efter dine behov. Nu, inde i containeren, skal du placere en glidende menu. I denne artikel forklarer vi, hvordan du opretter en venstre glidemenu.

Lad os komme igang

HTML-koden for skyderen er angivet nedenfor. Det er en grundlæggende bare version.

 Click here 

Slider

Twitter

@Supriya

@Girish

Et ankermærke bruges til at åbne menuen, når der klikkes på den. Dette er hvad der udløser menuen for at åbne, så du kan se, hvorfor det kaldes skyder-trigger . Menukomponenten er, hvad der ligger i skyderen-overordnet klasse.

Design nu menulinjen i CSS. Vær opmærksom på designdetaljerne.

.slider-container { position: relative; } .slider-container .slider-parent { height: 70vh; max-width: 250px; width: 100%; background: #6C7A89; position: absolute; left: -250px; top: 50px; visibility: hidden; opacity: 0; pointer-events: none; transition: .2s all linear; } .slider-container .slider-parent.active { visibility: visible; pointer-events: inherit; transition: .2s all ease-in-out; opacity: 1; left: 0; }

Lad os nu nedbryde ovenstående uddrag og diskutere, hvordan det fungerer.

Maxwidth definerer den maksimale bredde, op til hvilken div kan optage. I et mindre vindue kan det optage mindre end 250 px. Div indtager 250 pixel, når vinduet strækkes helt ud på skærmen.

Til tider kan brugeren se på webstedet på en meget mindre skærm, så vi vil have vores div til at ændre størrelsen i overensstemmelse hermed.

Lad os se på hvorfor tilbage: -250px? Dette gøres for at få den glatte glidende handling til menuen. Bemærk, at værdien for venstre er negativ, hvilket fortæller os, at menuen starter 250 px til venstre for startpositionen (som er 0). Så det er i øjeblikket ikke i det synlige område.

Vi ønsker overhovedet ikke, at glidemenuen skal ses, hvorfor vi tilføjer opacitet og gør dens synlighed skjult . Alle kan lide animation, og det giver en interessant visuel fornemmelse. Denne animation kan gøres ved hjælp af overgangskomponenten .

YAYYY! Den grundlæggende skyder er færdig!

Nu hvor den grundlæggende skyder er færdig, lad os forstå, hvad der sker, når skyderen er aktiv - det vil sige når der klikkes på det ankermærke, der åbner menulinjen.

Fokuser på den aktive klasse i CSS-koden ovenfor. Bemærk, at værdierne for opacitet ogsynligheden ændres. Denne ændring foretages for at gøre skyderen (som tidligere var skjult) synlig på skærmen.

Du kan også undre dig over: hvorfor er det nu tilbage: 0? Tidligere var skyderen ude af skærmen. Nu hvor vi ønsker, at menuen skal starte på venstre side af skærmen, ændrer vi værdien for venstre til 0.

OH! Animationen! Tilføj overgangskomponenten igen, så når skyderen er aktiv, letter den let fra venstre.

Det er gjort! Du har designet komponenterne, så hvad er det næste trin? JavaScript! Det vil omsætte alt dette til handling.

Tilføjelse af JavaScript

var sliderTrigger = document.getElementsByClassName("slider-trigger")[0];var slider = document.getElementsByClassName('slider-parent')[0];
sliderTrigger.addEventListener( "click" , function(el){
if(slider.classList.contains("active")){ slider.classList.remove("active"); }else{ slider.classList.add("active"); }
});

Lad os se på, hvordan JavaScript indpakker alt og får skyderen til at fungere. Vi ønsker, at skyderen skal åbnes, når der klikkes på skyderen på ankermærket. Så vi får elementet ind i en variabel sliderTrigger . Senere vi få hele skyderen element i den variable skyderen . Nu tilføjer vi en begivenhedslytter, der implementerer en funktion, når skyderenTriggerelementet klikkes.

sliderTrigger.addEventListener( "click" , function(el) {} );

Funktionen, der er skrevet, styrer mekanikken ved åbning og lukning af den glidende menulinje. Husk, at vi havde en aktiv og en normal skyder-forælderklasse.

Det hack, vi implementerer her, er at tilføje den aktive klasse, når der klikkes på sliderTrigger- elementet, og fjerne den aktive klasse, når det samme element klikkes igen. For at gøre det bruger vi koden nedenfor for at kontrollere, om variablen indeholder den aktive klasse.

slider.classList.contains("active")

Hvis værdien er sand, fjerner vi den aktive klasse fra listen. Hvad sker der så? Den glidende menulinje lukkes. Hvis værdien er falsk, tilføjer vi den aktive klasse til klasselisten. Hvad sker der nu? Ja, den glidende menulinje vises. Det er så simpelt.

slider.classList.add("active")
slider.classList.remove("active")

Voilà det er gjort !! Se hvem der klapper;)

Funktionen af ​​den samme kode vises nedenfor i CodePen.

Selvom dette er et grundlæggende eksempel, sender jeg eksempler på mere komplekse og forskellige typer glidende menubjælker i mit nyhedsbrev.

Github repo af Giyaletter

Twitter-håndtag: Supriya S og Girish Patil

Tak skal du have. Glad kodning :)

Tjek produkter fra os:

paybackhub.com og certhive.com