Автор оригинала: FreeCodeCamp Community Member.

Supriya Shashivasan.

Меню – это то, что вы ищете, когда вы приземлитесь на сайте. Он имеет варианты и дает вам доступ ко всему, что сайт должен предложить вам. Вы обязательно сказали бы, что это важная часть сайта, верно?

Мой друг 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). Так что в настоящее время не в видимой области.

Мы не хотим, чтобы скользящее меню было видно вообще, именно поэтому мы добавляем непрозрачность и сделать его Видимость скрыта Отказ Все любят анимацию, и это дает интересное визуальное чувство. Эта анимация может быть сделана с помощью Переход составная часть.

Йой! Базовый слайдер сделан!

Теперь, когда базовый слайдер сделан, давайте понять, что произойдет, когда нажатие панели ползунка – то есть, когда нажат привязка тега, который открывает строку меню.

Сосредоточиться на Активный Класс в CSS-коде приведен выше. Обратите внимание, что значения для непрозрачность и Видимость изменились. Это изменение сделано, чтобы сделать слайдер (который ранее был скрыт) виден на экране.

Кроме того, вы можете задаться вопросом: почему это сейчас Слева: 0? Ранее слайдер был вне экрана. Теперь, когда мы хотим начать меню на левой части экрана, мы изменяем значение Lever до 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.addEventListener( "click" , function(el) {} );

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

Хак, который мы реализуем здесь, это добавить активный класс, когда слайдергерггер Элемент нажат, и удалите активный класс, когда один и тот же элемент снова нажимается. Чтобы сделать то, что мы используем код, приведенный ниже, чтобы проверить, содержит ли переменная класс Active.

slider.classList.contains("active")

Если значение верно, мы удаляем класс акции из списка. Что тогда происходит? Строка скольжения закрывается. Если значение ложно, мы добавляем класс Active в классный список. Теперь, что происходит? Да, отображается панель скольжения меню. Это так просто.

slider.classList.add("active")

slider.classList.remove("active")

Voilà это сделано !! Посмотрите, кто хлопает;)

Работа одного и того же кода показана ниже в кодепене.

Хотя это основной пример, я отправляю примеры более сложных и различных типов стержней скользящих меню в моей рассылке.

Github Repo из Giyaletter

Ручка Twitter: Suriya S и Girish Patil.

Спасибо. Счастливое кодирование:)

Проверьте продукты нами:

paybackhub.com и certhive.com.