JS burger menu локально не работает

Question

В JSfiddle работает почему локально не работает ? Помогите кто нибудь сталкивался с такой проблемой

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div id="text" class="burger__menu-item nav">

      <span id="trigger" class="trigger">
        <i></i>
        <i></i>
        <i></i>
      </span>
      <ul id="menu" class="mobile-list menu">
        <li class="mobile-item"><a class="mobile-link mobile-link--active">Главная</a></li>
        <li class="mobile-item"><a class="mobile-link" href="photo.html">Фотографии</a></li>
        <li class="mobile-item"><a class="mobile-link" href="form.html">Конкурс</a></li>
        <li class="mobile-item"><a class="mobile-link" href="#">Lorem</a></li>
      </ul>

    </div>
  </body>
</html>

//css//
body{
  background:brown;
}
.burger__menu-item {
  width: 100%;
  text-align: center;
  margin: 0; }
.mobile-link {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  min-height: 68px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out; }

.mobile-link a[href]:hover, :focus {
  color: #d22856; }

.mobile-link a[href]:active {
  -webkit-transition: .3 ease-out;
  -o-transition: .3 ease-out;
  transition: .3 ease-out;
  color: #fff;
  opacity: .3; }

@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;
  }

}

//js//
document.getElementById("trigger").onclick = function() {open()};

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

Оказывается я вставил в начало боди а нужно было в перед закрывающим тегом боди после все заработало )))

БЛОГ НА HUSL

JS burger menu локально не работает

Ответы (0 шт):