Nav-burger collapse onclick [closed]

Question

Nav-burger collapse onclick [closed]

Navigation

#1 by (2 votes)

0

Good afternoon, I'm looking for someone to help me transform a nav-burger from fontawesome (fa-fa-bars) into X when a click is done and vice versa.

html5 css3

asked by anonymous 19.04.2017 / 18:29

1 answer

When importing the android project is giving error in java.lang Problem catching .resx file key

score 2 · Answer 1

Just add eventListener and change the element class validating if the menu is open (then it is closing and should be changed to fa-close ) or not (it is opening and should be changed to fa-bars ).

It's a simple gift example.

var aberto = false;

document.getElementById('troca').addEventListener('click', function(){
  this.className  = aberto ? "fa fa-close" : "fa fa-bars";
  aberto = !aberto;
});

div { font-size: 50px; }
span { cursor: pointer; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div> <!-- Isto é só pra mudar o tamanho do ícone -->
    <span id="troca" class="fa fa-bars"></span>
</div>