Как сделать выезжающий блок?

121

19 июня 2019, 07:40

Как сделать, чтобы изначально невидимый блок menu при нажатии на кнопку плавно выезжал справа на весь экран. Экран узкий мобильный.

<div class="container">
  <button>меню</button>
  <div class="menu" style="display:none; width:100%"></div>
</div>

Answer 1

Ну вы поняли смысл)

$('button').on('click', function() { 
  $('.menu_mobile').removeClass('hidden').addClass('active'); 
}); 
 
$('.close-menu').on('click', function() { 
  $('.menu_mobile').removeClass('active'); 
});

.hidden { 
  display: none !important; 
} 
 
.menu_mobile { 
  position: fixed; 
  display: block; 
  width: 100%; 
  height: 100%; 
  left: -700px; 
  top: 0; 
  padding: 40px; 
  z-index: 50; 
  background: #eee; 
  animation-name: menuClose; 
  animation-duration: 1s; 
} 
 
.menu_mobile.active { 
  left: 0; 
  animation-name: menuOpen; 
  animation-duration: 1s; 
} 
 
.menu_mobile.active .close-menu { 
  position: absolute; 
  margin: auto; 
  top: 0; 
  right: 70px; 
  width: 60px; 
  height: 60px; 
  background-color: #eeeeee; 
  font-size: 20px; 
  text-align: center; 
  line-height: 60px; 
  cursor: pointer; 
} 
 
@keyframes menuOpen { 
  from { 
    left: -700px; 
  } 
  to { 
    left: 0; 
  } 
} 
 
@keyframes menuClose { 
  from { 
    left: 0; 
  } 
  to { 
    left: -700px; 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <button>меню</button> 
  <div class="menu_mobile hidden"> 
    <button class="close-menu">x</button> 
  </div> 
</div>

Answer 2

// тут мы вешаем на кнопку МЕНЮ событие которое при клике на кнопку 
// добавляет menu_mobile некий класс, в данном случае это active 
 
document.querySelector('button').addEventListener('click', () => { 
  document.querySelector('.menu_mobile').classList.add('active'); 
  document.querySelector('.close-menu').classList.add('close-menu-active'); 
}) 
// а тут мы вешаем на кнопку close-menu событие которое пр кликена кнопку 
// удаляет menu_mobile  класс  active 
 
document.querySelector('.close-menu').addEventListener('click', () => { 
  document.querySelector('.menu_mobile').classList.remove('active'); 
  document.querySelector('.close-menu').classList.remove('close-menu-active') 
})

.menu_mobile { 
  position: fixed; 
  display: block; 
  width: 100%; 
  height: 100%; 
  left: -100%; 
  top: 0; 
  z-index: 1; 
  background: blue; 
  transition: left 1s 1s; 
} 
 
.menu_mobile.active { 
  left: 0; 
  transition: left 1s; 
} 
 
.close-menu { 
  transform: scale(0); 
  transition: transform 1s; 
} 
 
.close-menu-active { 
  transform: scale(1); 
  transition: transform 1s 1s; 
}

<button>меню</button> 
<div class="menu_mobile "> 
  <button class="close-menu">X</button> 
</div>

Вариант два, просто было нечего делать...

const buttons = document.querySelectorAll('button'); 
const btnWrap = document.querySelector('.btn-wrap'); 
const menu = document.querySelector('menu'); 
 
btnWrap.addEventListener('click', () => { 
  buttons.forEach(s => { 
    s.classList.contains('active') ? s.classList.remove('active') : s.classList.add('active'); 
  }) 
  menu.classList.contains('open') ? menu.classList.remove('open') : menu.classList.add('open'); 
})

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #2b2b2b; 
} 
 
li { 
  list-style-type: none; 
} 
 
.btn-wrap { 
  position: relative; 
  left: 25px; 
  top: 15px; 
  width: 100px; 
  height: 25px; 
  z-index: 5; 
  overflow: hidden; 
} 
 
button { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  font-family: fantasy; 
  font-size: 15px; 
  letter-spacing: 5px; 
  background: transparent; 
  border: none; 
  outline: none; 
  color: white; 
  cursor: pointer; 
  left: -100%; 
  transition: left 1s; 
} 
 
.active { 
  left: 0; 
} 
 
menu { 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  position: fixed; 
  width: 100%; 
  height: 1px; 
  left: 50%; 
  top: 50%; 
  z-index: 1; 
  background: rgba(250, 250, 250, .1); 
  transform: translate(-150%, -50%); 
  transition: transform 1s 1s, height 1s; 
} 
 
.open { 
  height: 100%; 
  transform: translate(-50%, -50%); 
  transition: transform 1s, height 1s 1s; 
} 
 
li { 
  overflow: hidden; 
  color: white; 
  font-family: fantasy; 
  font-size: 3vmax; 
  letter-spacing: 5px; 
  margin: 5px; 
  padding: 1px; 
} 
 
li span { 
  display: block; 
  width: 100%; 
  height: 100%; 
} 
 
menu>li { 
  opacity: 0; 
  transition: opacity 1s; 
} 
 
menu.open>li { 
  opacity: 1; 
  transition: opacity 1s 1s; 
} 
 
menu>li span { 
  transform: translateY(-100%); 
  transition: transform .5s; 
} 
 
menu.open>li span { 
  transform: translateY(0); 
  transition: transform .5s 1.5s; 
}

<div class="btn-wrap"> 
  <button class="open-menu active">Menu</button> 
  <button class="close-menu ">Close</button> 
</div> 
<menu> 
  <li class=menu><span>Menu_1</span></li> 
  <li class=menu><span>Menu_1</span></li> 
  <li class=menu><span>Menu_1</span></li> 
  <li class=menu><span>Menu_1</span></li> 
</menu>