Hello. When you click on a link, menu items appear, and if you then click anywhere on the screen (except for the link that activates the menu), the menu disappears.

How to make the menu disappear even when you click on the same link again?

.menu { display: none; padding: 3px; } .menu a { display: block; margin: 1px; padding: 10px; } .active_menu { display: block; } .active_menu:focus ~ .menu, .active_menu:active ~ .menu, .menu:hover { display: block; } 
 <a class='active_menu' href='javascript:void(0)' tabindex='1' href="#menu">Развернуть меню</a> <div class="menu"> <a href="/">Главная</a> <a href="/">Весь каталог</a> <a href="/">Досавка</a> <a href="/">Оплата</a> <a href="/">Условия</a> </div>

  • Your action is tied to the focus of the element. Clicking on it, the focus will happen again, and that's not working. Change the discovery method (hidden checkbox ?) And life will improve. - user207618
  • @Other don't quite understand where to change it. Could you write a solution in response. I will be very grateful. - iKey

2 answers 2

 .menu { display: none; } .menu a { display: block; margin: 1px; padding: 10px; } .active_menu input:checked + .menu { display: block; } 
 <label class='active_menu' style='cursor: pointer'> <input id='checkbox' type='checkbox' style='display: none'> Развернуть меню <div class="menu"> <a href="/">Главная</a> <a href="/">Весь каталог</a> <a href="/">Досавка</a> <a href="/">Оплата</a> <a href="/">Условия</a> </div> </label>

  • A click on the sides does not lead to closure. - user207618
  • @Other, any suggestions? - Mr. Black
  • one
    @Doofy, checkbox 1000 for 1000 to cover the whole page :) - MasterAlex
  • @MasterAlex, but for those who have a working area maybe more? - user207618
  • one
    @Doofy, in every joke there is some joke :) you can make the checkbox not display: none , but opacity: 0; and position: absolute and 100% width and height :) - MasterAlex

It can be done using the jQuery plugin in this way:

 <script> $('#menu').hide(); $('#Razvernut').on('click', function(){ $('#menu').show(); }); </script> <a class='active_menu' id="Razvernut" href='javascript:void(0)' tabindex='1' href="#menu">Развернуть меню</a> <!--Добавил к тэгу ID="menu"--> <div class="menu" id="menu"> <!--Добавил к тэгу ID="menu"--> <a href="/">Главная</a> <a href="/">Весь каталог</a> <a href="/">Доставка</a> <a href="/">Оплата</a> <a href="/">Условия</a> </div>

And if you want to do it in CSS , then do it with the help of a chekbox like this:

 .menu, #menyu { display: none; } .NajmiMenya { padding: 10px; background: yellow; color: black; cursor: pointer; -webkit-user-select: none; } #menyu:checked ~ .menu { display: block; } .ubrattocki { list-style-type: none; } 
 <input id="menyu" type="checkbox" /> <label for="menyu" class="NajmiMenya">Развернуть Меню</label> <ul class="menu ubrattocki"> <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>

  • 2
    You can not live without jquery - Mr. Black
  • I corrected) With the help of css we also wrote ... - E1mir