I have created a custom hamburger menu using only css. I am now interested in refining it with flexbox. Currently, my html/css code 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>Now, I am aiming to enhance the animation using css similar to the one shown in this example (first Slider):
I have come across some helpful tutorials online, but they do not incorporate flexbox which I want to utilize in my solution. Any assistance would be greatly appreciated.