CODEWITHSUNDEEP
javascripthtmlcssonclicktoggle
Markus Hallcyon
Markus Hallcyon

Reputation: 371

onclick and class toggling issue?

I have an < a > element with the text "menu" and a "hamburger" symbol beside it that animates when clicked. I simply want the hamburger symbol to animate when i click it or when i click the menu text. It's not working.

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
    <div id="st-trigger-effects" class="column">
        <a id="menu_button" href="#" data-effect="st-effect-1" >MENU</a>
        <a id="nav-toggle" href="#" data-effect="st-effect-1" ><span></span></a>
    </div>
</body>
</html>

css:

* { margin: 0%; padding: 0%; text-decoration: none; list-style-type: none; font-size: 100%; }

body {
  background: #000;
}


#menu_button {
    position: absolute;
    left: 6.79%;
    margin-top: 1.5%;
    z-index: 999999;
    color: #fff;
    font-size: 16px;
}




#nav-toggle { position: absolute; left: 18%; top: 0.65%; z-index: 999999; }
#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 2px;
  width: 18.575px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -5px; 
}
#nav-toggle span:after {
  bottom: -5px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

javascript:

var navNav = document.getElementById( 'nav-toggle' );
var menuMenu = document.getElementById( 'menu_button' );

navToggle = function () {
    this.classList.toggle('active');
};

navNav.onclick = navToggle;

menuMenu.onclick = navToggle; // not working

jsbin:

http://jsbin.com/leqonopani/9/edit

Upvotes: 0

Views: 105

Answers (1)

T J
T J

Reputation: 43156

Change the code to:

navToggle = function () {
  navNav.classList.toggle('active');
};

When you click #menu_button, this will refer to it, The class active should be added to #nav-toggle instead so that it'll animate

Upvotes: 3

Related Questions