A Pen by Arron Mabrey.

index.html

<div id="menu-icon">#menu-icon (click me)</div>
<div id="mobile-menu">
  <ul>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
      <a href="http://goldenshine.harbrdev.com/about-us/">About Us</a>
    </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-79">
      <a href="#">Services</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-195">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/carpet-cleaning/">Carpet Cleaning</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-200">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/window-cleaning/">Window Cleaning</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-198">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/green-cleaning/">Green Cleaning</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-197">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/deep-cleaning/">Deep Cleaning</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-199">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/vacancy-cleaning/">Vacancy Cleaning</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-196">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/christmas-lights/">Christmas Lights</a>
        </li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-142">
      <a href="#">Cities</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-148">
          <a href="http://goldenshine.harbrdev.com/service-locations/san-diego/">San Diego, CA</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-144">
          <a href="http://goldenshine.harbrdev.com/service-locations/orange-county/">Orange County, CA</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-235">
          <a href="http://goldenshine.harbrdev.com/service-locations/los-angeles/">Los Angeles, CA</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-146">
          <a href="http://goldenshine.harbrdev.com/service-locations/portland/">Portland, OR</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-145">
          <a href="http://goldenshine.harbrdev.com/service-locations/phoenix/">Phoenix, AZ</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-143">
          <a href="http://goldenshine.harbrdev.com/service-locations/las-vegas/">Las Vegas, NV</a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-service-locations menu-item-237">
          <a href="http://goldenshine.harbrdev.com/service-locations/salt-lake-city/">Salt Lake City, UT</a>
        </li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103">
      <a href="http://goldenshine.harbrdev.com/blog/">Blog</a>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-210">
      <a href="http://goldenshine.harbrdev.com/contact-us/">Contact</a>
    </li>
  </ul>
</div>

rnGyi.markdown

rnGyi

Forked from Captain Anonymous's Pen tzmcI.

A Pen by Arron Mabrey on CodePen.

License.

script.js

$(function() {

  // Mobile Menu toggle
  /* toggle nav */
  $("#menu-icon").on("click", function(){
    $("#mobile-menu").slideToggle('fast', 'swing');
    $(this).toggleClass("active");
  });

  $("#mobile-menu li.menu-item-has-children > a").on("click", function(){
    var $el = $(this).parent();
    event.preventDefault();
    $el.find(".sub-menu").slideToggle('fast', 'swing');
    $el.toggleClass("active");
  });

});