Как да изградите плъзгаща се лента с меню, използвайки HTML, CSS и JavaScript

Менюто е това, което търсите, когато кацнете на уебсайт. Той има опции и ви дава достъп до всичко, което уебсайтът може да ви предложи. Определено бихте казали, че това е важна част от уебсайта, нали?

Този месец с моя приятел Girish patil стартирахме двуседмичен бюлетин за разработчици отпред. Първият бюлетин разполага с плъзгащи се ленти с менюта и затова тук пиша за това как го изградихме.

Преди да започнем, вземете контейнер на място за цялата си уеб страница и проектирайте ширината и височината според вашите изисквания. Сега, вътре в контейнера, трябва да поставите плъзгащо се меню. В тази статия ще ви обясним как да създадете ляво плъзгащо се меню.

Да започваме

HTML кодът за плъзгача е даден по-долу. Това е основна гола версия.

 Click here 

Slider

Twitter

@Supriya

@Girish

Една котва маркер се използва за отваряне на менюто при кликване върху. Това е, което задейства отварянето на менюто, така че можете да видите защо се нарича плъзгач . Компонентът на менюто е това, което се намира в класа на родителя на плъзгача .

Сега проектирайте лентата с менюта в CSS. Обърнете внимание на детайлите на дизайна.

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

Нека сега разбием горния фрагмент и да обсъдим как работи.

Maxwidth определя максималната ширина, до която div може да заема. В по-малък прозорец той може да заема по-малко от 250px. Div заема 250px, когато прозорецът е опънат докрай на екрана.

Понякога потребителят може да разглежда уебсайта на много по-малък екран, така че искаме div да преоразмерява съответно.

Продължавайки, нека да разгледаме защо наляво: -250px? Това се прави, за да се получи това плавно плъзгащо действие за менюто. Забележете, че стойността за ляво е отрицателна, което ни казва, че менюто започва 250px вляво от началната позиция (което е 0). Така че в момента не е във видимата зона.

Ние изобщо не искаме плъзгащото се меню да се вижда, поради което добавяме непрозрачност и правим видимостта му скрита . Всички харесват анимацията и тя придава интересно визуално усещане. Тази анимация може да се направи с помощта на преходния компонент.

ДАЙ! Основният плъзгач е направен!

Original text


Сега, когато основният плъзгач е свършен, нека разберем какво се случва, когато плъзгачът е активен - тоест, когато се щракне котвата, която отваря лентата с менюта.

Фокусирайте се върху активния клас в CSS кода, даден по-горе. Забележете, че стойностите за непрозрачност ивидимостта се променя. Тази промяна е направена, за да направи плъзгача (който преди е бил скрит) видим на екрана.

Освен това може да се чудите: защо сега е останало: 0? Преди това плъзгачът беше извън екрана. Сега, когато искаме менюто да започне от лявата страна на екрана, променяме стойността от ляво на 0.

О! Анимацията! Добавете отново преходния компонент, така че когато плъзгачът да е активен, той се отпуска плавно отляво.

Готово е! Вие сте проектирали компонентите, така че каква е следващата стъпка? JavaScript! Ще приложи всичко това в действие.

Добавяне на малко 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"); }
});

Нека разгледаме как JavaScript обгръща всичко и кара плъзгача да работи. Искаме плъзгачът да се отвори при щракване на плъзгача на спусъка на котвата . Така че получаваме този елемент в променлива sliderTrigger . По-късно получаваме целия елемент на плъзгача в променливия плъзгач . Сега добавяме слушател на събития, който реализира функция, когато sliderTriggerелемент се щраква.

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

Функцията, която е написана, контролира механиката на отваряне и затваряне на плъзгащата се лента с менюта. Не забравяйте, че имахме активен и нормален родител-плъзгачклас.

Хакът, който прилагаме тук, е да добавим активния клас при щракване върху елемента sliderTrigger и да премахнем активния клас при щракване върху същия елемент отново. За целта използваме кода, даден по-долу, за да проверим дали променливата съдържа активния клас.

slider.classList.contains("active")

Ако стойността е вярна, премахваме активния клас от списъка. Какво става тогава? Плъзгащата се лента с меню се затваря. Ако стойността е false, ние добавяме активния клас към класа. Сега какво се случва? Да, показва се плъзгащата се лента с менюта. Толкова е просто.

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

Voilà готово !! Вижте кой пляска;)

Работата на същия код е показана по-долу в CodePen.

Въпреки че това е основен пример, изпращам примери за по-сложни и различни видове плъзгащи се ленти с менюта в моя бюлетин.

Github репо на Giyaletter

Twitter дръжка: Supriya S и Girish Patil

Thank you. Happy coding :)

Check out products by us:

paybackhub.com and certhive.com