У меня проблема с шириной блока (js)?

Question

[Dom Alfro]

Доброго времени всем ! Мучаюсь с такой проблемкой, один раз я ее решил - это было давно и я забыл ... не записал ... Вообщем такая проблема - делаю бургер адаптивный ( выпадающее меню ) и уже 3 дня не могу найти решения. А по сути дела вроде как и легко. Проблема в том что мне нужно решить задачу на чистом js так надо ). И так - по умолчанию у меня меню скрыто - в моб версии ( то есть при уменьшении нормально - есть кнопочка на нее нажимаешь, событие покажет и может снова скрыть ) Но если закрыть меню и расширить масштаб браузера то меню пропадет. Вот такой баг который не дает мне покоя. Может быть с jquery я бы и нашел быстрее ответ - но с js просто ...

<div id="but-m"><p>-</p></div>
		<div class="menu">
			<ul>
				<li><a href="index.html">Main</a></li>
				<li><a href="">Contacts</a></li>
				<li><a href="">About Us</a></li>
				<li><a href="">Help</a></li>
				<li><a href="">Reg-in</a></li>
			</ul>
		</div>

(function() {
	var box, menu;
	menu = document.querySelector(".menu");
	but = document.getElementById("but-m");

	menu.style.display = "none";

	but.onclick = close_open;

	function close_open() {
		if (menu.style.display == "none") {
			menu.style.display = "block";
		} else {
			menu.style.display = "none";
		}
	}
})();

Answer 1

[shmatuan]

Но если закрыть меню и расширить масштаб браузера то меню пропадет.

menu.style.display = "none"; Будет приоритетнее, чем медиа, которое срабатывает на изменении размера.
Если нужно только js: Или сделай отдельно мобильное / отдельно десктопное, или делай прверку на ресайзе в js ещё

UPD или делай закрытие через классы, прописав в медиа для них условия тоже

.hide {
  display: none;
}
@media screen and(min-width: 992px) {
  .hide {
    display: block;
  }
}

UPD2

@media screen and(min-width: 992px) {
  .menu{
    display: block !important;
  }
}

Comments

[Dom Alfro]

блин пасибо тебе огромное !