-1

I am sorry if this question has been asked a thousand times but I am not a coder more a designer. I am developing a one page site for my business with a hamburger menu that opens to cover the page. I have anchor links to the different sections. I got the code from different tutorials online but have one problem. How do I get the menu to close when the user clicks on the anchor link? I know there is a bit of JS code that I need to add but I can't figure out how. I am using Wordpress with the DIVI theme.

This is the code that I have added to my slide in menu.

jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });
});
#slide-in-open {
  cursor: pointer;
}

.line {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #EA5B13;
  border-radius: 9px;
  opacity: 1;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.line-2 {
  background: #96315c;
  top: 10px;
}

.line-3 {
  background: #65186A;
  top: 20px;
}

#slide-in-open.open .line-1 {
  top: 10px;
  background: #EA5B13;
  right: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-2 {
  top: 10px;
  background: #96315c;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-3 {
  top: 10px;
  background: #65186A;
  left: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.slide-in-menu {
  right: 0 !important;
  opacity: 1 !important;
}

.slide-in-menu-container {
  -webkit-transition: all 0.05s ease !important;
  -moz-transition: all 0.05s ease !important;
  -o-transition: all 0.05s ease !important;
  -ms-transition: all 0.05s ease !important;
  transition: all 0.05s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
InSync
  • 4,851
  • 4
  • 8
  • 30
Paul 808Images
  • 3
  • 1

2 Answers2

0

$(el).click(function(){...}) is deprecated

use $(el).on('click', function(){...}) instead

source: api.jquery.com/click-shorthand/

otherwise, it should work. unless there is an issue with the html markup, but you haven't posted any html so we can't know.

Levi
  • 661
  • 7
  • 26
-1

You can use this code:

jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });
  // For the anchor link
  $('ul.menu li a').click(function() {
    $('#slide-in-open').removeClass('open');
    $('.slide-in-menu-container').removeClass('slide-in-menu');
  });
});

Screen grab of the inspector

Benjamin Buch
  • 4,752
  • 7
  • 28
  • 51
Sofiqul Islam
  • 117
  • 3
  • Hi Sofiqul, thanks for your reply. I added your code but didn't seen to work. Do you think its something to do with the 'ul.menu li a' in the code ? – Paul 808Images May 26 '23 at 14:49
  • @Paul808Images Yes, you have to change the anchor selector like your website structure. If you can show me a screenshot of your HTML element I can show you the selector. – Sofiqul Islam May 26 '23 at 16:13
  • Also, you can share your website URL if it's live. – Sofiqul Islam May 26 '23 at 16:14
  • The site is not live and I don't know how to show you the html element. As I'm using DIVI, it hides all that. Could I use the inspection tools in firefox? – Paul 808Images May 26 '23 at 17:08
  • Yes, just use the inspection tool and select the anchor link. – Sofiqul Islam May 26 '23 at 17:09
  • I have added the screen shot to your answer, just waiting for admin approval – Paul 808Images May 26 '23 at 17:26
  • Let me check when it's approved. – Sofiqul Islam May 26 '23 at 17:44
  • User this script: jQuery(function($) { $('#slide-in-open').click(function() { $(this).toggleClass('open'); $('.slide-in-menu-container').toggleClass('slide-in-menu'); }); // For the anchor link $('ul.dsm-menu li a').click(function() { $('#slide-in-open').removeClass('open'); $('.slide-in-menu-container').removeClass('slide-in-menu'); }); }); I hope it will work. – Sofiqul Islam May 26 '23 at 17:47
  • Thanks Sofiqul, I'll check that out and tell you how it went – Paul 808Images May 26 '23 at 19:46