0

Как сделать так, чтобы при уменьшении окна осталась только кнопка, а ненумерованный список меню появлялся после нажатия на "сендвич"

Вот код:

$(window).resize(function() {
  var width = $(window).width();
  if (width > 760 && $('ul').is(':hidden')) {
    $('ul').removeAttr('style');
  }
});
$('.menu-icon').click(function() {
  $('.menu').toggle("active");
});
.menu {
  padding: 0;
  margin: 0;
  font-family: Arial;
}
.menu li {
  display: block;
  float: left;
}
.menu li a {
  padding: 10px;
  display: block;
  color: #fff;
  background: #444;
  text-decoration: none;
  margin: 1px;
}
.menu li a:hover {
  background: #222;
}
.menu-icon {
  text-align: right;
  display: none;
}
.menu-icon svg g {
  fill: #444;
}
@media (max-width: 600px) {
  .menu-icon {
    display: block;
  }
  .menu li {
    float: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="nav">
  <div class="menu-icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" version="1.1" viewBox="0 0 25 25" width="25px" data-livestyle-extension="available">
      <title/>
      <desc/>
      <defs/>
      <g fill="none" fill-rule="evenodd" id="TabBar-Icons" stroke="none" stroke-width="1">
        <g id="Hamburger">
          <path d="M0,2 L25,2 L25,6 L0,6 L0,2 Z M0,10 L25,10 L25,14 L0,14 L0,10 Z M0,18 L25,18 L25,22 L0,22 L0,18 Z" />
        </g>
      </g>
    </svg>
  </div>
  <ul class="menu">
    <li><a href="#">ГАЛЕРЕЯ</a>
    </li>
    <li><a href="#">ОБ АВТОРЕ</a>
    </li>
    <li><a href="#">ВЫСТАВКИ</a>
    </li>
    <li><a href="#">АРТВОЯЖ</a>
    </li>
    <li><a href="#">КОНТАКТЫ</a>
    </li>
  </ul>
</nav>

2
  • Вам нужно, что бы когда width < 760, то скрывалось меню?
    – Yuri
    30 янв 2017 в 19:22
  • ДА именно так и открывалось вертикальное меню после нажатия иконку меню
    – EVgen
    30 янв 2017 в 19:41

2 ответа 2

0

$(window).resize(function() {
  var width = $(window).width();
  if (width > 760 && $('ul').is(':hidden')) {
    $('ul').removeAttr('style');
  }else if(width <= 760){
    $('.menu').hide(); // Резкое закрытие
    //$('.menu').fadeOut(); // Плавное закрытие
  };
});
$('.menu-icon').click(function() {
  $('.menu').toggle("active");
});
.menu {
  padding: 0;
  margin: 0;
  font-family: Arial;
}
.menu li {
  display: block;
  float: left;
}
.menu li a {
  padding: 10px;
  display: block;
  color: #fff;
  background: #444;
  text-decoration: none;
  margin: 1px;
}
.menu li a:hover {
  background: #222;
}
.menu-icon {
  text-align: right;
  display: none;
}
.menu-icon svg g {
  fill: #444;
}
@media (max-width: 600px) {
  .menu-icon {
    display: block;
  }
  .menu li {
    float: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="nav">
  <div class="menu-icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" version="1.1" viewBox="0 0 25 25" width="25px" data-livestyle-extension="available">
      <title/>
      <desc/>
      <defs/>
      <g fill="none" fill-rule="evenodd" id="TabBar-Icons" stroke="none" stroke-width="1">
        <g id="Hamburger">
          <path d="M0,2 L25,2 L25,6 L0,6 L0,2 Z M0,10 L25,10 L25,14 L0,14 L0,10 Z M0,18 L25,18 L25,22 L0,22 L0,18 Z" />
        </g>
      </g>
    </svg>
  </div>
  <ul class="menu">
    <li><a href="#">ГАЛЕРЕЯ</a>
    </li>
    <li><a href="#">ОБ АВТОРЕ</a>
    </li>
    <li><a href="#">ВЫСТАВКИ</a>
    </li>
    <li><a href="#">АРТВОЯЖ</a>
    </li>
    <li><a href="#">КОНТАКТЫ</a>
    </li>
  </ul>
</nav>

0

Вы не правильно используете toggle (отображает и скрывает элемент), вам нужен toggleClass (добавляет или удаляет класс у элемента), чтоб переключать классы у элемента.

  1. Что у вас не так это то, что вы скрываете сами элемента списка, а не список.
  2. Использование toggle, вместо toggleClass

toggle
toggleClass

2
  • когда я прописываю toggleClass при нажатии на сендвич при 760px список меню не схлопывается.
    – EVgen
    30 янв 2017 в 19:49
  • Не знаю, ваш пример вообще не рабочий, вставьте более рабочий пример, потому, что я даже не вижу, чтоб вы написали класс active и тому подобное.
    – DimenSi
    30 янв 2017 в 21:01

Ваш ответ

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

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