0

Имеется готовый код на jquery, реализующий гамбургер меню в магазине на Opencart. Но гамбургер функционирует при любом разрешении экрана, как можно ограничить его, скажем до 800px ширины? Код:

$( ".cross2" ).hide();
$( ".list-group" ).hide();
$( ".hamburger2" ).click(function() {
    $( ".list-group" ).slideToggle( "slow", function() {
        $( ".hamburger2" ).hide();
        $( ".cross2" ).show();
    });
});

$( ".cross2" ).click(function() {
    $( ".list-group" ).slideToggle( "slow", function() {
        $( ".cross2" ).hide();
        $( ".hamburger2" ).show();
    });
});

Попробовал добавить if($(window).width()<800) {...}, но после этого гамбургер вообще не работает

1
  • 1
    А разметка где?
    – Alex78191
    1 июн 2017 в 21:32

2 ответа 2

1

Я не АС в js но может быть так ?

$(document).ready(function() {
  $(".hmenu").click(function() {
    $("nav").toggleClass("show");
    $(this).toggleClass("showw");
  });
});
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

html,
body {
  padding: 10px 30px;
}

nav {
  height: 50px;
  background: lightgrey;
  line-height: 50px;
}

ul {
  display: table;
}

ul li {
  display: table-cell;
  vertical-align: bottom;
}

ul li a {
  display: table-cell;
  width: 1000px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  color: #000;
}

@media screen and (min-width:480px) and (max-width:640px) {
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    height: 100%;
    padding: 0;
  }
  nav {
    display: block;
    width: 200px;
    height: 100%;
    background-color: lightgrey;
  }
  ul,
  ul li,
  ul li a {
    display: block;
    width: 200px;
    color: #000;
  }
  ul li {
    height: 50px;
    line-height: 50px;
  }
}

@media screen and (max-width:480px) {
  * {
    margin: 0;
    padding: 0;
  }
  html,
  body {
    height: 100%;
    padding: 0;
  }
  nav {
    display: block;
    width: 200px;
    height: 100%;
    background-color: lightgrey;
    display: none;
  }
  ul,
  ul li,
  ul li a {
    display: block;
    width: 200px;
    color: #000;
  }
  ul li {
    height: 50px;
    line-height: 50px;
  }
  .hmenu {
    width: 50px;
    height: 50px;
  }
  .hmenu span {
    display: block;
    width: 90%;
    height: 10px;
    background: #ccc;
    margin: 6px auto;
    border-radius: 6px;
  }
  .hmenu.showw {
    margin-left: 200px;
  }
  nav.show {
    display: block;
    margin-top: -50px;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<p class="hmenu">
  <span></span>
  <span></span>
  <span></span>
</p>
<nav>
  <ul>
    <li>
      <a href="">Главная</a>
    </li>
    <li>
      <a href="">Форум</a>
    </li>
    <li>
      <a href="">Портфолио</a>
    </li>
    <li>
      <a href="">О разработчике</a>
    </li>
  </ul>
</nav>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

DEMO

1
  • Попробую ваш код. Но чтобы было понятнее(нужно было изначально кинуть ссылку) вот мой сайт :yarninbobbins.com.ua на опенкарте
    – nirolo1
    2 июн 2017 в 11:40
0

Решение может заключаться в использовании media queries. Примерно так:

@media (min-width: 801px) {
  #<id вашего меню> {
    display: none;
  }
}
2
  • Спасибо, но мне нужно не само меню скрыть, а сам гамбургер, грубо говоря, отключить. Чтобы при этом меню осталось, просто в развернутом виде.
    – nirolo1
    2 июн 2017 в 10:49
  • А, ну тогда посмотрите на другой ответ, вроде он подходит.
    – diralik
    2 июн 2017 в 11:35

Ваш ответ

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

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