Hello. I have a problem with the overlay menu: I can not disable when clicking on the link

$(function() { $(".menu-link").click(function(e) { e.preventDefault(); $(".menu-overlay").toggleClass("open"); $(".menu").toggleClass("open"); }); }); 
 .menu { position: absolute; top: 20px; left: 20px; height: 46px; width: 46px; } .menu-link { width: 100%; height: 100%; position: absolute; z-index: 1002; } .menu-icon { position: absolute; width: 20px; height: 14px; margin: auto; left: 0; top: 0; right: 0; bottom: 1px; } .menu-circle { background-color: #fff; width: 100%; height: 100%; position: absolute; border-radius: 50%; transform: scale(1); z-index: 1000; } .menu-overlay { background-color: #fff; color: #333; height: 100%; width: 100%; position: fixed; text-align: center; transition: opacity 0.2s ease-in-out; z-index: 1001; } .menu-overlay a { color: #333; font-weight: 600; font-size: 32px; padding: 2%; margin: 25% 1% 0; display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu hidden-lg"> <span class="menu-circle"></span> <a href="#" class="menu-link"> <span class="menu-icon"> <span class="menu-line menu-line-1"></span> <span class="menu-line menu-line-2"></span> <span class="menu-line menu-line-3"></span> </span> </a> </div> <div class="menu-overlay"> <a href="#">About</a> <a href="#">Service</a> <a href="#">Work</a> <a href="#">Blog</a> <a href="#">Contact</a> </div>

http://codepen.io/anon/pen/ENqRpV

  • Can you format and make your code executable? It looks unreadable. If possible, also shorten the code to the problem location. - Vadim Ovchinnikov
  • @VadimOvchinnikov, ready) - Yuri

1 answer 1

You need to add the same handler on the menu item's click. If nothing else happens in the code, then preventDefault not needed.

 $(".menu-link, .menu-overlay > a").click(function(e) { //e.preventDefault(); ... });