бургер меню на js [закрыт]

224

02 августа 2018, 09:10

Подскажите пожалуйста оптимальное решение. Умею делать на jquery, но хочу научиться на чистом js.

Answer 1

механизм собственно не сложный

для проверки: https://jsfiddle.net/mn2wc0k9/21/

нажмите выполнить код потом разверните на всю страницу а браузер сожмите до/меньше 640px увидите кнопку при клике на которую показывается меню

document.getElementById("trigger").onclick = function() { 
  open() 
}; 
 
function open() { 
  document.getElementById("menu").classList.toggle("show"); 
}

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration: none; 
} 
 
ul { 
  display: flex; 
  align-items: center; 
  height: 50px; 
} 
 
ul a { 
  margin-left: 10px; 
} 
 
@media (max-width:640px) { 
  .menu { 
    display: none; 
  } 
  .trigger { 
    display: inline-block; 
    margin: 3px; 
    cursor: pointer; 
  } 
  .trigger i { 
    display: block; 
    width: 30px; 
    height: 6px; 
    margin: 4px auto; 
    background: #222; 
  } 
  .show { 
    display: block; 
  } 
}

<div class="nav"> 
  <span id="trigger" class="trigger"> 
  <i></i> 
  <i></i> 
  <i></i> 
</span> 
  <ul id="menu" class="menu"> 
    <li><a href="">item1</a></li> 
    <li><a href="">item2</a></li> 
    <li><a href="">item3</a></li> 
  </ul> 
</div>