Install Hamburger CSS on Angular

Question

My intention is to install the Hamburger CSS from Jonathan Suh on my Angular Project.

I used npm i --s hamburgers which successfully added the package. I also added its CSS file to my angular.json file.

When I try to add a hamburger using the code below, the hamburger is being displayed, but it's not clickable. Why is that?

<button class="hamburger hamburger--collapse" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>

@לבנימלכה As far as I'm concerned I did everything that's mentioned, except of SASS. — , Mar 31 '19 at 11:53
@לבנימלכה I‘m using Angular with CSS - can I just use a SASS file? — , Mar 31 '19 at 12:02
https://stackoverflow.com/questions/40726081/angular-cli-from-css-to-scss — לבני מלכה, Mar 31 '19 at 12:05
@לבנימלכה But I still want my default Stylesheet to be CSS, that’s not possible? — , Mar 31 '19 at 12:07
from doc `.scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular.` — לבני מלכה, Mar 31 '19 at 12:12

score 7 · Accepted Answer · answered Apr 20 '19 at 09:44

Steps to follow,

install hamburger package. npm install hamburgers --save
import in styles.scss @import '~hamburgers/_sass/hamburgers/hamburgers.scss';
use hamburger divs in html and toggle the class. (click)="active=!active" [ngClass]="active ? 'is-active' : ''"

score 2 · Answer 2 · edited Apr 20 '19 at 09:47

As you comment that you use CSS and in doc write:

.scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular

Here is alternative with angular and css

Html

<div class="collapse" (click)="ifShow=!ifShow" [ngClass]="{'hide':!ifShow}">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS:

.collapse{
  position: relative;
  cursor: pointer;
}
.collapse span{
    position: absolute;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: black;
}

.collapse span:nth-child(2) {
    top: 10px;
}
.collapse span:nth-child(3){
    top: -10px;
}

.hide span:nth-child(2) {
   transform:rotate(45deg);
   top:0;
}

.hide span:nth-child(3){
   transform:rotate(-45deg);
   top: 0;
}

.hide span:nth-child(1){
  animation:hideMain 1.5s;
  opacity: 0;
}
.hide span:nth-child(2),.hide span:nth-child(3) {
  animation:hide 1.5s;
}

@keyframes hide{
  0%{
    transform:rotate(0);
  }
  50%{
    top:0;
    transform:rotate(0);
  }
}
@keyframes hideMain{
  49%{
   opacity: 1;
  }
  50%{
  opacity: 0;
  }
}

TS:

 ifShow : boolean = true;

Install Hamburger CSS on Angular

2 Answers2