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

Foto af rawpixel på Unsplash

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 bestemt sige, at det er en vigtig del af et websted, ikke?

Min ven, Girish patil, og jeg startede et to ugentlige nyhedsbrev for frontede udviklere denne måned. Det første nyhedsbrev indeholder glidende menulinjer, 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 i henhold til dine krav. Nu inden i beholderen skal du placere en glidemenu. I denne artikel forklarer vi, hvordan man opretter en venstre glidemenu.

Lad os komme igang

Inspiration !!!! ;)

HTML-koden til skyderen vises nedenfor. Det er en grundlæggende bare version.


   Klik her
   
    

Slider      Twitter
     @Supriya
     @Girish
   

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

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

.slider-container {
  position: relativ;
 }
  .slider-container .slider-parent {
    højde: 70vh;
    max-bredde: 250px;
    bredde: 100%;
    baggrund: # 6C7A89;
    position: absolut;
    venstre: -250 px;
    top: 50px;
    synlighed: skjult;
    opacitet: 0;
    pointer-events: none;
    overgang: .2s alle lineære;
 }
   .slider-container .slider-parent.active {
      synlighed: synlig;
      pointer-events: arve;
      overgang: .2s alle let-ind-ud;
      opacitet: 1;
      venstre: 0;
 }

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

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

Til tider kan brugeren muligvis se på webstedet på en meget mindre skærm, så vi ønsker, at vores div skal ændre størrelse.

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

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

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

Jeg er sikker på, at du vil danse bedre: P

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

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

Du kan også undre dig: 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 glideren er aktiv, letter den let fra venstre.

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

Tilføjelse af noget JavaScript

var sliderTrigger = document.getElementsByClassName ("glider-trigger") [0];
var slider = document.getElementsByClassName ('skyderen-overordnet') [0];
sliderTrigger.addEventListener ("klik", funktion (el) {
hvis (slider.classList.contains ( "aktivt")) {
  slider.classList.remove ( "aktivt");
 }andet{
  slider.classList.add ( "aktivt");
 }
});

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 til ankermærket. Så vi får dette element ind i en variabel skyderenTrigger. Senere får vi hele skyderelementet ind i den variable skyder. Nu tilføjer vi en begivenhedslytter, der implementerer en funktion, når der klikkes på sliderTrigger-elementet.

sliderTrigger.addEventListener ("klik", funktion (el) {});

Funktionen, der er skrevet, styrer mekanikerne ved at åbne og lukke den glidende menulinje. Husk, at vi havde en aktiv og en normal skyder-forældreklasse.

Hacket, vi implementerer her, er at tilføje den aktive klasse, når der klikkes på sliderTrigger-elementet, og fjerne den aktive klasse, når der klikkes på det samme element igen. For at gøre det bruger vi nedenstående kode til at kontrollere, om variablen indeholder den aktive klasse.

slider.classList.contains ( "aktivt")

Hvis værdien er sand, fjerner vi den aktive klasse fra listen. Hvad sker der så? Menubjælken glider lukkes. Hvis værdien er falsk, tilføjer vi den aktive klasse til klasselisten. Hvad sker der nu? Ja, den glidende menulinje vises. Så enkelt er det.

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

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

Arbejdet med den samme kode vises nedenfor i CodePen.

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

Github-repo af Giyaletter

Twitter-håndtag: Supriya S og Girish Patil

Tak skal du have. Glad kodning :)

Se produkter fra os:

paybackhub.com og certhive.com