Блог

В настоящее время я делаю сайт, где я хочу, чтобы переключатель / значок открывал меню, которое скользит слева на рабочем столе, а затем на мобильном устройстве я просто хочу, чтобы оно опускалось сверху и было отзывчивым. Кто-нибудь знает, как это сделать?

Спасибо

Это можно сделать несколькими способами, я бы рекомендовал использовать CSS:

CSS (первый подход для мобильных устройств):

 // mobile
.menu {
  position: fixed;
  top: 0;
  height: 2em;
}

// desktop
@media (min-width: <desktop size>px){
  .menu {
    width: 2em;
    height: fit-content;

    /* smooth transition */
    will-change: transform;
    transition: transform 450ms linear;

    /* this centers the menu vertically and
    puts the menu out of the viewport. */
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-100%);
  }
  .menu.show {
    /* this will put the menu in the viewport */
    transform: translateY(-50%) translateX(0);
  }
}
 

JAVASCRIPT:

 var toggleButton = document.querySelector("#toggle-button");
var menu = document.querySelector("#menu");

toggleButton.addEventListener("click", function(){
  menu.classList.toggle("show");
}, false);
 

Возможно, вы захотите добавить префиксы и протестировать на нескольких устройствах.

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