Како направити клизну траку менија користећи ХТМЛ, ЦСС и ЈаваСцрипт

Мени је оно што тражите када слетите на веб локацију. Има опције и омогућава вам приступ свему што вам веб локација нуди. Дефинитивно бисте рекли да је то важан део веб странице, зар не?

Мој пријатељ Гирисх патил и ја смо овог месеца покренули двонедељне билтене за предње програмере. Први билтен садржи клизне траке менија, па овде пишем о томе како смо га направили.

Пре него што започнемо, припремите контејнер за целу своју веб страницу и дизајнирајте ширину и висину у складу са вашим захтевима. Сада, унутар контејнера, морате да поставите клизни мени. У овом чланку ћемо објаснити како направити леви клизни мени.

Хајде да почнемо

ХТМЛ код за клизач је дат у наставку. То је основна гола верзија.

 Click here 

Slider

Twitter

@Supriya

@Girish

Ознака сидра се користи за отварање менија када се на њу кликне. То је оно што покреће отварање менија, тако да можете видети зашто се зове клизач-окидач . Компонента менија је оно што се налази у класи клизача-родитеља .

Сада дизајнирајте траку менија у ЦСС-у. Обратите пажњу на детаље дизајна.

.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; }

Хајде сада да рашчланимо горњи исечак и разговарамо о томе како то функционише.

Маквидтх дефинише максималну ширину до које див може заузети. У мањем прозору може заузети мање од 250 пиксела. Див заузима 250 пиксела када је прозор развучен до краја на екрану.

Понекад корисник може погледати веб локацију на много мањем екрану, па желимо да наш див у складу с тим промени величину.

Идемо даље, погледајмо зашто лево: -250пк? То је учињено како би се постигла она глатка акција клизања за мени. Приметите да је вредност лево негативна, што нам говори да мени почиње 250 пиксела лево од почетне позиције (што је 0). Дакле, тренутно није на видљивом подручју.

Не желимо да се клизајући мени уопште види, због чега додајемо непрозирност и његову видљивост скривамо . Сви воле анимацију, а она даје занимљив визуелни осећај. Ова анимација се може извести помоћу прелазне компоненте.

ИАИИИ! Основни клизач је готов!

Сада када је основни клизач завршен, хајде да схватимо шта се дешава када је клизач активан - то јест када се кликне на сидрену ознаку која отвара траку менија.

Фокусирајте се на активну класу у ЦСС коду наведеном горе. Приметите да вредности непрозирности ивидљивост се мења. Ова промена је направљена да би клизач (који је претходно био скривен) био видљив на екрану.

Такође, можда се питате: зашто је сада остало: 0? Раније је клизач био ван екрана. Сада када желимо да мени започне са леве стране екрана, вредност леве променимо на 0.

ОХ! Анимација! Поново додајте прелазну компоненту тако да се клизач, када је активан, глатко увлачи са леве стране.

Готово је! Дизајнирали сте компоненте, па шта је следећи корак? ЈаваСцрипт! Све ће то спровести у дело.

Додавање мало ЈаваСцрипт-а

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"); }
});

Погледајмо како ЈаваСцрипт обавија све и покреће клизач. Желимо да се клизач отвори када се кликне на покретач клизача сидрене ознаке . Дакле, тај елемент добијамо у променљивој слидерТриггер . Касније добијамо цео елемент клизача у променљиви клизач . Сада додајемо преслушач догађаја који имплементира функцију када је слидерТриггеркликне се на елемент.

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

Функција која је написана контролише механику отварања и затварања клизне траке менија. Запамтите да смо имали активног и нормалног родитеља-клизачакласа.

Хацк који овде имплементирамо је додавање активне класе када се кликне на елемент слидерТриггер и уклањање активне класе када се поново кликне на исти елемент. Да бисмо то урадили, користимо код дат у наставку да бисмо проверили да ли променљива садржи активну класу.

slider.classList.contains("active")

Ако је вредност тачна, уклањамо активну класу са листе. Шта се онда дешава? Клизни мени се затвара. Ако је вредност нетачна, на листу предавања додајемо активну класу. Шта се сада дешава? Да, приказује се клизна трака менија. То је тако једноставно.

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

Воила готово је !! Погледајте ко пљешће;)

Рад истог кода приказан је испод у ЦодеПен-у.

Иако је ово основни пример, у свом билтену шаљем примере сложенијих и различитих врста клизних трака са менијима.

Гитхуб репо за Гииалеттер

Твиттер дршка: Суприиа С и Гирисх Патил

Хвала вам. Срећно кодирање :)

Погледајте наше производе:

паибацкхуб.цом и цертхиве.цом