CODEWITHSUNDEEP
htmljquerycss
Manendar Verma
Manendar Verma

Reputation: 47

Trying to create a hamburger menu using jQuery

I am trying to create a hamburger menu. When I click on the three lines I don't get the 'x'. I think I have the classes named correctly. If you need more code I can provide that also.

$('.js--nav-icon').click(function() {
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon');
  nav.slideToggle(200);
  if (icon.hasClass('.menu-outline')) {
    icon.addClass('.close-outline');
    icon.removeClass('.menu-outline');
  } else {
    icon.addClass('.menu-outline');
    icon.removeClass('.close-outline');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
  <img src="Resources/img/logo.png" alt="Omnifood logo" class="logo-black">
  <ul class="main-nav js--main-nav">
    <li><a href="#features">Food delivery</a></li>
    <li><a href="#works">How it works</a></li>
    <li><a href="#cities">Our cities</a></li>
    <li><a href="#plans">Sign up</a></li>
  </ul>
  <ion-icon class="mobile-nav-icon js--nav-icon" name="menu-outline"></ion-icon>
</div>

Upvotes: 1

Views: 135

Answers (2)

user14819036
user14819036

Reputation:

You should not use dot(.) in jQuery hasClass,addClass,removeClass functions. remove those dots:

if (icon.hasClass('menu-outline')) {
    icon.addClass('close-outline');
    icon.removeClass('menu-outline');
} 
else {
   icon.addClass('menu-outline');
   icon.removeClass('close-outline');
}

Upvotes: 1

Asif Sharif Shahid
Asif Sharif Shahid

Reputation: 370

Please remove (.) as below:

icon.addClass('close-outline');

Upvotes: 0

Related Questions