Com es crea una barra de menú lliscant mitjançant HTML, CSS i JavaScript

Foto de rawpixel a Unsplash

Un menú és el que busqueu quan arribeu a un lloc web. Té opcions i us dóna accés a tot allò que el lloc web us ofereix. Definitivament diríeu que és una part important d’un lloc web, oi?

El meu amic Girish patil i jo vam començar un butlletí quinzenal per a desenvolupadors amb publicacions aquest mes. El primer butlletí conté barres de menú lliscants. Per això escric aquí com la vam crear.

Abans de començar, prepareu un contenidor per a tot el lloc web i dissenyeu l’amplada i l’alçada segons els vostres requisits. Ara heu de col·locar un menú lliscant al contenidor. En aquest article s’explica com crear un menú amb barres lliscants a l’esquerra.

Comencem

Inspiració !!!! ;)

A continuació es mostra el codi HTML del control lliscant. És una versió senzilla.

clica aquí
Control lliscant Twitter @Supriya @Girish

S'utilitza una etiqueta d'ancoratge per obrir el menú quan hi feu clic. Això obrirà el menú perquè pugueu veure per què s’anomena control lliscant. El component del menú es troba a la classe lliscant-pare.

Ara dissenyeu la barra de menú a CSS. Presteu atenció als detalls de la construcció.

.slider-container {posició: relativa; } .slider-container .slider-parent {altura: 70vh; Amplada màxima: 250 px; Amplada: 100%; Antecedents: # 6C7A89; Posició: absoluta; esquerra: -250 px; superior: 50 px; Visibilitat: oculta; Opacitat: 0; Esdeveniments de punter: cap; Transició: .2s tots lineals; } .slider-container .slider-parent.active {Visibilitat: visible; Esdeveniments de punter: heretar; Transició: .2s tot facilitat d'entrada-sortida; Opacitat: 1; esquerra: 0; }

Ara desglossem el fragment anterior i expliquem com funciona.

Amplada màxima defineix l'amplada màxima fins a la qual es pot ocupar el div. En una finestra més petita pot ocupar menys de 250 px. El div ocupa 250 px quan la finestra s’estira fins a la pantalla.

De vegades, l'usuari pot veure el lloc web en una pantalla molt més petita, de manera que volem que el nostre div es redimensioni en conseqüència.

Mirem més enllà, per què a l'esquerra: -250 px? Això es fa perquè el menú es mogui sense problemes. Tingueu en compte que el valor de l'esquerra és negatiu, el que significa que el menú comença a 250 px a l'esquerra de la posició inicial (que és 0). Per tant, actualment no es troba a la zona visible.

Volem que el menú desplegable no aparegui en absolut. Per això, augmentem l’opacitat i la fem invisible. A tothom li agrada l’animació i té una sensació visual interessant. Aquesta animació es pot fer amb el component de transició.

YAYYY! La diapositiva bàsica està a punt.

Estic segur que ballareu millor: P

Ara que s'ha fet el control lliscant bàsic, entenem què passa quan el control lliscant està actiu, és a dir, quan es fa clic a l'etiqueta d'ancoratge que obre la barra de menú.

Centreu-vos en la classe activa del codi CSS indicat anteriorment. Fixeu-vos que els valors d’opacitat i visibilitat canvien. Aquest canvi es fa per fer visible el control lliscant anteriorment amagat a la pantalla.

També us podeu preguntar: Per què es troba ara a l'esquerra: 0? Anteriorment, el control lliscant no apareixia a la pantalla. Ara que volem que el menú comenci a la part esquerra de la pantalla, canviem el valor d’esquerra a 0.

OH! L’animació! Afegiu de nou el component de transició perquè el control lliscant de l'esquerra s'esvaeixi perfectament quan estigui actiu.

S'ha acabat! Heu dissenyat els components. Quin és el següent pas? JavaScript Tot això està implementat.

Afegeix JavaScript

var sliderTrigger = document.getElementsByClassName ("slider-trigger") [0]; var control lliscant = document.getElementsByClassName ('control lliscant-pare') [0];
sliderTrigger.addEventListener ("clic", funció (el) {
if (slider.classList.contains ("active")) {slider.classList.remove ("active"); } else {slider.classList.add ("actiu"); }
});

Vegem com JavaScript ho embolica tot i posa en funcionament el control lliscant. Volem que el control lliscant s’obri quan es fa clic al disparador del control lliscant de l’etiqueta d’ancoratge. Per tant, posem aquest element en un control lliscant variable. Més endavant obtenim tot l'element lliscant al lliscant variable. Ara afegim un oient d'esdeveniments que implementa una funció quan es fa clic a l'element sliderTrigger.

sliderTrigger.addEventListener ("clic", funció (el) {});

La funció escrita controla la mecànica d'obertura i tancament de la barra de menú lliscant. Recordeu, teníem una classe principal activa i normal.

El hack que implementem aquí és afegir la classe activa quan es fa clic a l'element sliderTrigger i eliminar la classe activa quan es torna a fer clic al mateix element. Per fer-ho, utilitzarem el codi que es mostra a continuació per comprovar que la variable conté la classe activa.

slider.classList.contains ("actiu")

Si el valor és cert, la classe activa s'elimina de la llista. Què passa llavors? La barra de menú mòbil està tancada. Si el valor és fals, la classe activa s'afegeix a la llista de classes. Què passa ara? Sí, es mostra la barra de menú desplegable. Tan simple com això.

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

Voilà ja està fet !! Mira qui aplaudeix;)

El funcionament del mateix codi es mostra al CodePen següent.

Tot i que aquest és un exemple senzill, al meu butlletí envio exemples de tipus de barres de menú lliscants més complexes i variats.

Github Repo de Giyaletter

Gestor de Twitter: Supriya S i Girish Patil

Moltes gràcies. Codificació feliç :)

Mireu els nostres productes:

paybackhub.com i certhive.com