How to create a menu icon

      No Comments on How to create a menu icon

How to create a menu icon – simple CSS animation to translate and rotate the bars to form a cross on click, toggling the class using JavaScript.

How to create a menu icon

HTML

<div class="container" onclick="animate_me(this)">
  <div class="b_1"></div>
  <div class="b_2"></div>
  <div class="b_3"></div>
</div>

CSS

.container 
{
    cursor: pointer;
    margin:40px;
    width:40px;
    background-color:#993366;
    padding:10px;
}
.b_1, .b_2, .b_3 
{
    width: 38px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
.animate10 .b_1 
{
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
     transform: rotate(-45deg) translate(-9px, 6px) ;
}
.animate10 .b_2 
{
    opacity: 0;
}
.animate10 .b_3 
{
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
     transform: rotate(45deg) translate(-8px, -8px) ;
}

JavaScript

function animate_me(x) {
    x.classList.toggle("animate10");
}

Leave a Reply

Your email address will not be published. Required fields are marked *