2

Подскажите пожалуйста как можно скрыть меню по клику ссылки в данном меню в адаптивной верстке, т.е при ширине экрана, например, менее 992 пикселей?

В верхней части расположена кнопка скрытия ВСЕГО меню.

То есть по итогу должно быть так:

  • при ширине монитора более 992 пикселей нормальное обычное меню,
  • менее 992 пикселей - выпадающее при нажатии скрывающей кнопки и закрытие по ссылке в меню.

Буду очень благодарен!

<div class="gl_menu">
    <button class="topnav_menuup_btn hidden-md hidden-lg">
        <span class="menu_up_mob">Меню</span>

        <span class="fa-stack fa-lg">
            <i class="fa fa-navicon fa-stack-1x"></i>
            <i class="fa fa-square-o fa-stack-2x"></i>
    </span>

    </button>
    <nav id="main-nav" role="navigation">


        <ul id="main-menuup" class="sm sm-blue" }>
            <li class="active"><a href="#">Главная</a></li>
            <li ><a href="#">О компании</a></li>
            <li ><a href="#">Галерея работ</a></li>
            <li ><a href="#">Стоимость проекта</a></li>
            <li ><a href="#">Заказать проект</a></li>
            <li ><a href="#">Контакты</a></li>
        </ul>
    </nav>
</div>

2 ответа 2

1

Вариант slideToggle:

$('.topnav_menuup_btn').on('click', function(e){
  e.preventDefault();
  
  var
    $this = $(this),
    wrap = $this.closest('.gl_menu'),
    nav = wrap.find('nav');
  
  nav.slideToggle();
});
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#main-nav {
  display: none;
}

@media screen and (min-width: 992px) {
  .topnav_menuup_btn {
    display: none;
  }
  
  #main-nav {
    display: block !important;
  }
  
  #main-nav li {
    display: inline-block;
    vertical-align: middle;
  }
  
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  
<div class="gl_menu">
  <button class="topnav_menuup_btn hidden-md hidden-lg">
    <span class="menu_up_mob">Меню</span>

    <span class="fa-stack fa-lg">
      <i class="fa fa-navicon fa-stack-1x"></i>
      <i class="fa fa-square-o fa-stack-2x"></i>
    </span>
  </button>
  
  <nav id="main-nav" role="navigation">
    <ul id="main-menuup" class="sm sm-blue">
      <li class="active"><a href="#">Главная</a></li>
      <li ><a href="#">О компании</a></li>
      <li ><a href="#">Галерея работ</a></li>
      <li ><a href="#">Стоимость проекта</a></li>
      <li ><a href="#">Заказать проект</a></li>
      <li ><a href="#">Контакты</a></li>
    </ul>
  </nav>
</div>

Вариант с классом:

$('.topnav_menuup_btn').on('click', function(e){
  e.preventDefault();
  
  var
    $this = $(this),
    wrap = $this.closest('.gl_menu'),
    nav = wrap.find('nav');
  
  if(!nav.hasClass('open')){
    nav.addClass('open');
  }else {
    nav.removeClass('open');
  }
});
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.gl_menu {
  overflow: hidden;
}

#main-nav {
  transition: all .2s ease-in-out;
  transform: translateX(-100%);
}

#main-nav.open {
  transform: translateX(0%);
}

@media screen and (min-width: 992px) {
  .topnav_menuup_btn {
    display: none;
  }
  
  #main-nav {
    display: block !important;
  }
  
  #main-nav li {
    display: inline-block;
    vertical-align: middle;
  }
  
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  
<div class="gl_menu">
  <button class="topnav_menuup_btn hidden-md hidden-lg">
    <span class="menu_up_mob">Меню</span>

    <span class="fa-stack fa-lg">
      <i class="fa fa-navicon fa-stack-1x"></i>
      <i class="fa fa-square-o fa-stack-2x"></i>
    </span>
  </button>
  
  <nav id="main-nav" role="navigation">
    <ul id="main-menuup" class="sm sm-blue">
      <li class="active"><a href="#">Главная</a></li>
      <li ><a href="#">О компании</a></li>
      <li ><a href="#">Галерея работ</a></li>
      <li ><a href="#">Стоимость проекта</a></li>
      <li ><a href="#">Заказать проект</a></li>
      <li ><a href="#">Контакты</a></li>
    </ul>
  </nav>
</div>

0

Как-то так.

P.S. В ответе показана примерная логика, возможно код требует доработки.

$('#main-menuup').on('click', 'li', function() {
  $('#main-menuup').addClass('menu_hidden').attr('style', '');
})

$('.menu_up_mob').click(function() {
  if($('#main-menuup').hasClass('menu_hidden') && $(window).width <= 992) {
    $('#main-menuup').removeClass('menu_hidden');
  }
  else {
    $('#main-menuup').toggle();
  }
})
@media screen and (max-width: 992px) {
  .menu_hidden {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .menu_hidden {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gl_menu">
    <button class="topnav_menuup_btn hidden-md hidden-lg">
        <span class="menu_up_mob">Меню</span>

        <span class="fa-stack fa-lg">
            <i class="fa fa-navicon fa-stack-1x"></i>
            <i class="fa fa-square-o fa-stack-2x"></i>
    </span>

    </button>
    <nav id="main-nav" role="navigation">


        <ul id="main-menuup" class="sm sm-blue">
            <li class="active"><a href="#">Главная</a></li>
            <li ><a href="#">О компании</a></li>
            <li ><a href="#">Галерея работ</a></li>
            <li ><a href="#">Стоимость проекта</a></li>
            <li ><a href="#">Заказать проект</a></li>
            <li ><a href="#">Контакты</a></li>
        </ul>
    </nav>
</div>

1
  • все супер, только добавить бы как нибудь более плавного "исчезновения" меню... ) 3 мая 2017 в 8:12

Ваш ответ

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

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