如何使用CSS汉堡菜单上下滑动移动菜单

Question

I have a pen for this please minimize your browser size so it is mobile size and you should see the hamburger menu. The idea is when you click the menu this should happen: - Hamburger icon changes to 'x' close icon - Menu slides down this is using the class 'isOPen' which uses css keyframes (this is working on the pen!)

When I click on the 'x' close icon this should happen:

• 'x' close icon reverts back to hamburger menu
• menu slides up (this is possible by applying the class 'isClose' which also uses CSS keyframes. (Not working on the pen)

What I'm trying to fix: revert the close icon to hamburger menu and slide up the menu.

Code pen

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 global-action-bar">
      <div class="global-action-bar-container">
        <div class="col-xs-4 col-sm-6">
          <!-- CONTACT -->
          <a class="visible-xs" href="#"><i class="fa fa-phone"></i>&nbsp;&nbsp;(111) 111-111</a>
          <!-- FEEDBACK -->
          <div class="hidden-xs">
            <a href="#"><i class="fa fa-phone"></i>&nbsp; Contact us (USA) (111) 111-111</a>
            <span class="divider">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
            <a href="#"><i class="fa fa-pencil-square-o"></i>&nbsp; Feedback</a>
          </div>
        </div>

        <div class="col-xs-8 col-sm-6 location-language-currency">
          <!-- LOCATION -->
          <a href="#">Change Location</a>
          <img class="location-flag" src="http://placehold.it/24x24" alt="USA">

          <!-- LANGUAGE -->
          <select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
                      <option selected="selected" value="en-US">English</option>
                      <option value="es-MX">Espa&#241;ol</option>
                    </select>

          <!-- CURRENCY -->
          <select class="hidden-xs" id="ddlLanguage" name="SelectedLanguage">
                      <option selected="selected" value="en-US">USD</option>
                    </select>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ========== @END GLOBAL BAR COMPONENT ======== -->

<!-- ========== HEADER NAVIGATION COMPONENT ============= -->
<div class="container-fluid margin-none">
  <div class="row header-navigation padding-none">
    <div class="col-xs-12">
      <div class="header-navigation-container">
        <!-- Header Brand -->
        <div class="col-xs-4 col-sm-2 header-navigation-logo">
          <a href="#">
              <img src="http://placehold.it/130x45" alt="our company" height="45">
            </a>
        </div>
        <!-- Header Mobile icons -->
        <div class="col-xs-8 visible-xs header-mobile-icons">
          <!-- User icon -->
          <a href="javascript:void(0)" class="fa fa-user-circle" aria-hidden="true"></a>
          <!-- Cart icon & Cart indicator -->
          <a href="javascript:void(0)" class="fa fa-shopping-cart" aria-hidden="true"></a>
          <span class="circle"></span>
          <!-- Mobile Menu Icon -->
          <a class="mobile-icon" id="mobileIcon" href="#"><span></span></a>
        </div>
        <!-- Header Desktop nav -->
        <div class="hidden-xs col-sm-10 desktop-nav">
          <ul class="margin-none text-right">
            <li class="hidden-md hidden-lg">
              <a href="javascript:void(0)">Menu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
            </li>
            <li class="hidden-xs hidden-sm">
              <a href="search_refine.html">Products</a>
            </li>
            <li class="hidden-xs hidden-sm">
              <a href="javascript:void(0)">Manufacturers</a>
            </li>
            <li class="hidden-xs hidden-sm hidden-md">
              <a href="javascript:void(0)">Applications</a>
            </li>
            <li class="hidden-xs hidden-sm hidden-md">
              <a href="javascript:void(0)">Services &amp; Tools</a>
            </li>
            <li class="hidden-xs hidden-sm hidden-md">
              <a href="javascript:void(0)">Help</a>
            </li>
            <li class="hidden-xs hidden-sm hidden-lg">
              <a href="javascript:void(0)">More <i class="fa fa-angle-down" aria-hidden="true"></i></a>
            </li>
            <li class="history-account-login-nav">
              <a href="javascript:void(0)">Order History</a>
            </li>
            <li class="history-account-login-nav">
              <a href="javascript:void(0)">Log In</a>
            </li>
            <li class="padding-none">|</li>
            <li>
              <a href="javascript:void(0)"><strong>Register</strong></a>
            </li>
            <li class="history-account-login-nav padding-right-none">
              <a href="javascript:void(0)">
                <i class="fa fa-shopping-cart fa-lg" alt="Cart"></i><span class="badge badge-cart">455</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- MOBILE MENU   -->
<div class="col-xs-12 padding-none margin-none mobile-menu hidden" id="mobileMenu">
  <ul>
    <li class="active"><a href="javascript:void(0)">Home</a></li>
    <li class="active"><a href="javascript:void(0)">Products <i class="fa fa-angle-right fa-lg pull-right"></i></a></li>
    <li><a href="javascript:void(0)">NEWEST Products</a></li>
    <li><a href="javascript:void(0)">Manufacturers</a></li>
    <li><a href="javascript:void(0)">Contact Us</a></li>
  </ul>
  <div class="col-xs-12 mobile-menu-welcome-logout padding-none margin-none">
    <p class="mobile-menu-welcome-user padding-none margin-none">Welcome User</p>
    <p class="mobile-menu-log-out padding-none margin-none">
      <a href="javascript:void(0)"><i class="fa fa-user-circle"></i> Log Out</a>
    </p>
  </div>
</div>
<!-- ========== @END HEADER NAVIGATION COMPONENT ============= -->

<!-- ========== SEARCH COMPONENT ============= -->
<div class="container-fluid search">
  <div class="row">
    <div class="search-container">
      <div class="col-xs-12 col-sm-9 col-sm-offset-0 col-md-5 col-md-offset-3">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn dropdown-search-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    All <i class="fa fa-angle-down" aria-hidden="true"></i>
                </button>
            <ul class="dropdown-menu" id="dropdown">
              <li><a href="#" class="selected">All</a>
                <li><a href="#" class="category"> Capacitors</a>
                  <li><a href="#" class="category"> Circuit Protection</a>
                    <li><a href="#" class="category"> Computing</a>
                      <li><a href="#" class="category"> Connectors</a>
                        <li><a href="#" class="category"> Diodes &amp; Rectifiers</a>
                          <li><a href="#" class="category"> EMI/RFI Components</a>
            </ul>
          </div>
          <input type="text" id="inputField" class="form-control search-input" placeholder="Part # or Keyword">
          <div class="input-group-btn">
            <button class="btn m-primary-btn search-btn"><i class="fa fa-search"></i></button>
          </div>
        </div>
      </div>
      <!-- checkboxes -->
      <div class="hidden-xs col-sm-3 col-md-4 checkboxes padding-none">
        <label title="stocked" class="checkbox-spacing">
            <input type="checkbox" name="" value="" class="stocked"> Stocked
          </label>
        <label title="RoHS" class="checkbox-spacing">
            <input type="checkbox" name="" value="" > RoHS
          </label>
      </div>
    </div>
    <!-- @end search container -->
  </div>
</div>
<!-- ========== @END SEARCH COMPONENT ============= -->

Answer 1

Use .hasClass() to check if an element has a class instead of .is() . Javascript:

menu.on("click", function(e){  
  e.preventDefault();
    if(menu.hasClass('active')){
      closeMenu();
    }else{
      openMenu();
    }
});