CODEWITHSUNDEEP
jqueryhtmlcssangularjsflexbox
webta.st.ic
webta.st.ic

Reputation: 5179

CSS animated hamburger menu to X

I've made my own hamburger menu just with css. I would like to solve it with flexbox. So my html/css part is already done and looks like this:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.animateHamburger = function() {
    // ANIMATION
    console.log("animate hamburger to cross and back to hamburger");
  }
});
.cAnimatedExpander {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.cAnimatedExpander span {
  height: 2px;
  width: 20px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="cAnimatedExpander" ng-click="animateHamburger()">
  <span></span>
  <span></span>
  <span></span>
</div>

So now I would like to have a animation with css like in this example (first one Slider): https://jonsuh.com/hamburgers/

I've found some good tutorials on the internet, but without flexbox I'd like to use in my solution. Hope for some help.

Upvotes: 0

Views: 825

Answers (1)

viCky
viCky

Reputation: 864

this should solve your problem.

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.animateHamburger = function() {
    // ANIMATION
    console.log("animate hamburger to cross and back to hamburger");
    $scope.isActive = !$scope.isActive;
  }
  
});
.cAnimatedExpander {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.cAnimatedExpander span {
  height: 2px;
  width: 20px;
  background-color: blue;
  transition-duration: 1s;
}

.cross span.top {
    transform: translate(0px, -4px) rotate(45deg);
    transition-duration: 1s;
    transform-origin: left;
}

.cross span.middle {
  opacity: 0;
  transition-duration: 1s;
}

.cross span.bottom {
    transform: translate(0px, -4px) rotate(-45deg);
    transition-duration: 1s;
    transform-origin: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-class="{'cross': isActive}" class="cAnimatedExpander" ng-click="animateHamburger()">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

Upvotes: 3

Related Questions