Как скрыть меню гамбургера на рабочем столе с помощью jQuery?

Я практикуюсь с JQuery. Я хотел создать простую панель навигации, например, панель навигации Bootstrap. Я хочу меню гамбургера на мобильном телефоне и "обычное" меню на рабочем столе, но я заблокирован.

Я не знаю, как установить нормальное меню со встроенными элементами списка справа от h1. Я пытался поставить что-то вроде этого: if ($(window).width <= 860) { на jQuery, но это не работает.

JSFiddle здесь: https://jsfiddle.net/l_wel/kzLs5jou/

РЕДАКТИРОВАТЬ: я решил проблему благодаря вашему совету использовать медиа-запросы CSS.

$(function () {
  $('ul').hide();
  $('span#toggleMenu').on('click', function (e) {
    $('ul').slideToggle();
  });
});
.container {
  margin: 0 auto;
  width: 75%;
}

h1 {
  float: left;
}

span {
  float: right;
  cursor: pointer;
  margin-top: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
  text-align: center;
}

li {
  margin-bottom: 20px;
  font-size: 1.5em;
}
<body>
  <header class="container">
    <h1>Toggle Navbar</h1>
    <nav id="navbar">
      <span id="toggleMenu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png" alt="menu"></span>
      <ul>
        <li class="item">Item1</li>
        <li class="item">Item2</li>
        <li class="item">Item3</li>
        <li class="item">Item4</li>
        <li class="item">Item5</li>
      </ul>
    </nav>
  </header>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Источник

3 ответа

У меня работает следующий код:

if(window.innerWidth <= 860) {

}
Источник

Вы можете справиться nav изменить с помощью CSS с помощью медиа-запросов, а затем вам просто нужно переключить ul по нажатию кнопки.

$('span#toggleMenu').on('click', function(e) {
  $('ul').slideToggle();
});
.container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 75%;
}
#toggleMenu {
  display: none;
}
span {
  float: right;
  cursor: pointer;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  clear: both;
  text-align: center;
}

li {
  font-size: 1.5em;
}

@media(max-width: 768px) {
   #toggleMenu {
     display: block;
   }
   ul {
     display: none;
   }
   nav {
     position: relative;
   }
   ul {
     position: absolute;
     left: 50%;
     top: 100%;
     transform: translateX(-50%);
   }
}
@media(min-width: 768px) {
  ul {
    display: flex !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="container">
  <h1>Toggle Navbar</h1>
  <nav id="navbar">
    <span id="toggleMenu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png" alt="menu"></span>
    <ul>
      <li class="item">Item1</li>
      <li class="item">Item2</li>
      <li class="item">Item3</li>
      <li class="item">Item4</li>
      <li class="item">Item5</li>
    </ul>
  </nav>
</header>

Источник

Вы были близки с if ($(window).width <= 860), Обратите внимание, что width это метод, а не свойство, поэтому он нуждается в скобках:

if($(window).width() <= 860) {
  $('span#toggleMenu').hide();
}

Лучший способ сделать это - использовать медиазапросы:

<style>
  @media (max-width: 860px) {
    span#toggleMenu {
      display: none;
    }
  }
</style>
Источник
Другие вопросы по тегам