Search code examples
twitter-bootstrapmenu

Bootstrap "collapse" link

I am trying to add this hamburger icon to my bootstrap menu. So when I click on the hamburger the text should expand and collapse when I click on it again. It works fine with a normal link but as soon as I add the class "menu-trigger" it stops working. I've already tried everything I can but now I am stuck.

HTML:

<body>
<section>
<a class="menu-trigger" id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span></span>
<span></span>
<span></span>
</a>
<a id="menu10" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
link works fine
<span></span>
<span></span>
<span></span>
</a>
</section>

<section>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
$(function(){
$('.menu-trigger').on('click', function() {
$(this).toggleClass('active');
return false;
});
});
</script>
</body>

CSS:

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 40px;
  height: 32px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 13px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
#menu10:not(.active):hover span:nth-of-type(2) {
  width: 70%;
}
#menu10:not(.active):hover span:nth-of-type(3) {
  width: 35%;
}
#menu10.active span:nth-of-type(1) {
  -webkit-transform: translateY(13px) rotate(-45deg);
  transform: translateY(13px) rotate(-45deg);
}
#menu10.active span:nth-of-type(2) {
  opacity: 0;
}
#menu10.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
}

Thanks.

Solution

  • Just remove the return false from your custom script. It will work fine.