1

Хочу сделать выдвижное меню (hamburger-menu) без использования сторонних плагинов. И сразу первая проблема: как вынести <div> за пределы отображающейся страницы? Насколько я сейчас представляю, по нажатию кнопки я буду через JavaScript-анимацию перемещать этот <div> в видимую область.

2
  • код бы добавили
    – stackanon
    19 окт 2016 в 4:16
  • его ещё пока нет, я только продумываю принцип. 19 окт 2016 в 4:53

1 ответ 1

2

Добавляем списку, который хотим скрывать\показывать, плавность (время задаете свое):

transition: all .27s ease-in-out;

И добавляем трансформацию transform: translateX(-100%);. Список будет вынесен за body.

При клике - добавляем всему блоку nav активный класс 'on', при котором трансформация меняет свое значение с -100% на 0%:

transform: translateX(0%);

Пример:

$('.trigger').on('click', function(){
  var nav = $(this).closest('nav');
  
  if(!nav.hasClass('on')){
    nav.addClass('on');
  }else {
    nav.removeClass('on');
  }
});
nav ul {
  width: 200px;
  background: tomato;
  color: #fff;
  padding: 1rem;
  margin: 0;
  list-style-type: none;
  position: absolute;
  
  transition: all .27s ease-in-out;
  transform: translateX(-100%);
}

nav.on ul {
  transform: translateX(0%);
}


/* Доп. стилизация для наглядности */
body, html {
  padding: 0;
  margin: 0;
}

nav {
  position: relative;
}

nav button {
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


  <nav>
    <button class="trigger">btn</button>
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
    </ul>
  </nav>
  
  <main>
  </main>

3
  • Благодарю Вас за время, потраченное на написание ответа! Вы бы не могли дать краткий комментарий о том, как решили поставленную задачу? Насколько я вижу, Вы использовали CSS-анимацию. 19 окт 2016 в 4:56
  • @GurebuBokofu, добавила краткий комментарий в ответ. Смысл в том, что при помощи небольшого скрипта, мы проверяем навигацию на активный класс и в зависимости от наличия\отсутствия добавляем\удаляем класс on. Появление\исчезание списка осуществляется при помощи свойства transform: translateX();, 0% - меню видно, 100% - меню скрыто за пределами документа. Плавность осуществляется при помощи свойства transition
    – SVE
    19 окт 2016 в 6:33
  • 1
    Отлично, теперь всё понятно. Ещё раз спасибо Вам за ответ :) 19 окт 2016 в 7:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.