How to make so that when the window is reduced, only the button remains, and the unnumbered menu list appears after clicking on the "sandwich"

Here is the code:

$(window).resize(function() { var width = $(window).width(); if (width > 760 && $('ul').is(':hidden')) { $('ul').removeAttr('style'); } }); $('.menu-icon').click(function() { $('.menu').toggle("active"); }); 
 .menu { padding: 0; margin: 0; font-family: Arial; } .menu li { display: block; float: left; } .menu li a { padding: 10px; display: block; color: #fff; background: #444; text-decoration: none; margin: 1px; } .menu li a:hover { background: #222; } .menu-icon { text-align: right; display: none; } .menu-icon svg g { fill: #444; } @media (max-width: 600px) { .menu-icon { display: block; } .menu li { float: none; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" version="1.1" viewBox="0 0 25 25" width="25px" data-livestyle-extension="available"> <title/> <desc/> <defs/> <g fill="none" fill-rule="evenodd" id="TabBar-Icons" stroke="none" stroke-width="1"> <g id="Hamburger"> <path d="M0,2 L25,2 L25,6 L0,6 L0,2 Z M0,10 L25,10 L25,14 L0,14 L0,10 Z M0,18 L25,18 L25,22 L0,22 L0,18 Z" /> </g> </g> </svg> </div> <ul class="menu"> <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>

  • Do you need, what if width < 760 , then the menu was hidden? - Yuri
  • YES, this is exactly how the vertical menu was opened after clicking the menu icon - EVgen

2 answers 2

 $(window).resize(function() { var width = $(window).width(); if (width > 760 && $('ul').is(':hidden')) { $('ul').removeAttr('style'); }else if(width <= 760){ $('.menu').hide(); // Резкое закрытие //$('.menu').fadeOut(); // Плавное закрытие }; }); $('.menu-icon').click(function() { $('.menu').toggle("active"); }); 
 .menu { padding: 0; margin: 0; font-family: Arial; } .menu li { display: block; float: left; } .menu li a { padding: 10px; display: block; color: #fff; background: #444; text-decoration: none; margin: 1px; } .menu li a:hover { background: #222; } .menu-icon { text-align: right; display: none; } .menu-icon svg g { fill: #444; } @media (max-width: 600px) { .menu-icon { display: block; } .menu li { float: none; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav"> <div class="menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" version="1.1" viewBox="0 0 25 25" width="25px" data-livestyle-extension="available"> <title/> <desc/> <defs/> <g fill="none" fill-rule="evenodd" id="TabBar-Icons" stroke="none" stroke-width="1"> <g id="Hamburger"> <path d="M0,2 L25,2 L25,6 L0,6 L0,2 Z M0,10 L25,10 L25,14 L0,14 L0,10 Z M0,18 L25,18 L25,22 L0,22 L0,18 Z" /> </g> </g> </svg> </div> <ul class="menu"> <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>

    You are not using toggle correctly (showing and hiding an element), you need toggleClass (adding or removing a class from an element) to switch classes from an element.

    1. What you have is wrong is that you hide the list item itself, not the list.
    2. Using toggle, instead of toggleClass

    toggle
    toggleClass

    • when I prescribe toggleClass when I click on a sandwich at 760px, the menu list does not collapse. - EVgen
    • I do not know, your example is not working at all, insert a more working example, because I don’t even see that you write a class active and the like. - DimenSi