CODEWITHSUNDEEP
javascriptjqueryhtmlcss
grayson
grayson

Reputation: 3

Can't hide a submenu on mobile and show it on click

It's has been answered in several ways I've found on StackOverflow, but can't get it to work on my Wordpress theme. Very new to js/JQuery, beginning when I started troubleshooting this. Here is my website.

Right now, my submenu for "WORK" opens on hover, which is ok on desktop, but on mobile screens below 767px, my nav menu changes into a button operated by this jQuery function, and my whole "WORK" submenu is open, listing everything out and taking up a lot of space:

(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
  menu.removeClass('open');
} else {
  menu.addClass('open');
}
       });
    });
;

And when I add this code from this post, the whole menu button disappears on mobile and nothing is clickable:

$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
    var $el = $('ul',this); // element to toggle
    $('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
    $el.stop(true, true).slideToggle(400); // toggle element
    return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
    e.stopPropagation();  // stop events from bubbling from sub menu clicks
});
});​

I have tried a few different ones, like this one, which also made the button disappear and seem to clash with the jQuery button code.

This PHP seems to define the navigation classes:

<?php
            wp_nav_menu(array(
             'container_id' => 'cssmenu',
             'theme_location' => 'menu-1',
             'fallback_cb'       => 'gusto_photography_Menu_Walker::fallback',
             'walker' => new Gusto_Photography_Menu_Walker(),
            ));
        ?>

with the corresponding CSS here:

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
  background: transparent;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#cssmenu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  float: none;
  text-align: left;
  padding-top: 15px;
}

#cssmenu ul:after,
#cssmenu:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

#cssmenu a {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;

}

#cssmenu ul li a {
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}


#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
}

#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
}

#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 1;
  top: 13px;
  right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}

#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 2;
  top: 15px;
  right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}

#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 170px;
  padding: 7px 7px 7px 7px;
  text-align: left;
}

#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
  color: #777;
}

#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #eee;
}

#cssmenu ul li ul li:hover>ul {
  left: 100%;
  top: 0;
}

#cssmenu ul li ul li:hover>ul>li {
  max-height: 72px;
  position: relative;
}

#cssmenu>ul>li {
  display: block;
}

#cssmenu.align-center>ul>li {
  float: none;
  display: inline-block;
}

#cssmenu.align-center>ul {
  text-align: center;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right>ul>li:hover>ul {
  left: auto;
  right: 0;
}

#cssmenu.align-right ul ul li:hover>ul {
  right: 100%;
  left: auto;
}

#cssmenu.align-right ul ul li a {
  text-align: right;
}

#cssmenu>ul>li:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  z-index: 0;
  border-bottom: 0px solid #000;
  background: transparent;
  -webkit-transition: border-bottom .2s;
  -moz-transition: border-bottom .2s;
  -ms-transition: border-bottom .2s;
  -o-transition: border-bottom .2s;
  transition: border-bottom .2s;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 10px;
}

#cssmenu>ul>li.has-sub>a:after {
  display: block;
  content: '';
  background: #ffffff;
  height: 2px;
  width: 12px;
  margin: 10px 0 0;
  position: absolute;
  border-radius: 13px;
  right: 0px;
  left: 47px;
  top: 18px;
}

#cssmenu>ul>li.has-sub>a:before {
  display: block;
  content: '';
  border: 4px solid transparent;
  border-top-color: #000;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 0px;
  left: 47px;
  top: 18px;
}

#cssmenu>ul>li>a {
  color: #000;
  padding:15px 15px 0;
  padding-left: 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  z-index: 2;
  position: relative;
}

#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
  height: 100%;
}

#cssmenu>ul>li:hover>a {
  color: #000;
}
#cssmenu>ul>li.active>a {
}

#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}

#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
  border-top-color: #eee;
}

#cssmenu>ul>li:hover>ul {
  left: 0;
}

#cssmenu>ul>li:hover>ul>li {
  max-height: 72px;
  position: relative;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu>ul>li>a {
  width: auto;
  display: inline-block;
}

#cssmenu>ul>li {
  width: auto;
}

#cssmenu>ul>li>ul {
  width: 170px;
  display: block;
}

#cssmenu>ul>li>ul>li {
  width: 170px;
  display: block;
}
.main-navigation {
    margin-bottom: 0em;
}

@media all and (max-width: 767px),
 {
  #cssmenu>ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  #cssmenu>ul>li>ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu>ul>li>ul>li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu>ul>li>ul>li>a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center>ul {
    text-align: left;
  }
  #cssmenu.align-center>ul>li {
    display: block;
  }
  #cssmenu>ul.open {
    max-height: 1000px;
    border-top: 0px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul>li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    padding: 6px;
    text-align: center;
  }
  #cssmenu ul>li:after {
    display: none;
  }
  #cssmenu ul li.has-sub>a:after,
  #cssmenu ul li.has-sub>a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
    display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover>ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover>ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover>ul>li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #333;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover>a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    margin-top: 20px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #000;
    cursor: pointer;
    border: 2px solid #000;
  }
  #cssmenu #menu-button:after {
    display: none;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #000;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: none;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #000;
    right: 20px;
    top: 26px;
  }
}

I'm not sure why the jQuery I'm adding is not affecting it the submenu at all. Thank you for your help.

Upvotes: 0

Views: 2547

Answers (1)

ASG
ASG

Reputation: 573

You can try to target the ul inside of the 'work' li item and use display:none to hide it. Then on click of the work li you can add and remove a class for example class="open" to close or open the submenu using jQuery.

<ul class="menu">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
   <li class="has-children">Click me!
    <ul class="submenu">
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
    </ul>
  </li>
 <li>list item</li>
 <li>list item</li>  
</ul>

The CSS would be something like this: 

.menu {
  .has-children {
    color: red;
    cursor:pointer;
      &.open {
      .submenu {
        display:block;
      }
     }
    }
    & :nth-child(4n) {
     ul {
      display:none;
     }
   }
 }

and the jQuery something like this: 

$( document ).ready(function() {
  $('.has-children').on('click', function(){

  if ($('.has-children').hasClass('open')) {
     $(this).removeClass('open');
   } else {
      $(this).addClass('open');
   }
  });  
});

It will make more sense if you see it working.

I've put together a working example in the following link: https://codepen.io/Angel-SG/pen/JwXRZo

Upvotes: 1

Related Questions