Hamburguer menu

Hamburguer menu.markdown

Hamburguer menu

A Pen by jhonsore on CodePen.

License.

index.html

<div class="menu-mobile">
    <div class="wrapper">
    
        <button id="bt-menu-mobile">
            <span class="top"></span>
            <span class="middle"></span>
            <span class="bottom"></span>
        </button>
        <div class="clear"></div>
    </div>
    <div id="wrapper-menu-mobile">

    </div>
</div>

script.js

$("#bt-menu-mobile").click(function(){
  
  $(this).toggleClass("close-bt-hamburguer");

    return false;
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.menu-mobile{ position: fixed; position: fixed; top: 0; left: 0; width: 100%; z-index: 6000;}
.menu-mobile .wrapper{ background-color: #15af97; height: 70px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.5);
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.5);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";}

.menu-mobile #bt-menu-mobile {
  outline:none;cursor:pointer; border: none; background: none; width: 40px; float: right; margin: 20px 20px 0 0; position: relative; height: 30px;}
.menu-mobile #bt-menu-mobile span{  background-color: #ffffff; display: block; height: 5px; position: absolute; width: 100%;}
.menu-mobile #bt-menu-mobile span.top{ top: 0;}
.menu-mobile #bt-menu-mobile span.middle{ top: 50%; margin-top: -2px;}
.menu-mobile #bt-menu-mobile span.bottom{ top:100%; margin-top: -2px;}

.menu-mobile #bt-menu-mobile.close-bt-hamburguer .middle{ opacity:0;}
.menu-mobile #bt-menu-mobile.close-bt-hamburguer span.top{ margin: -2px 0 0 -3px; top: 50%; width: 120%;
    -moz-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
    -o-transform:rotate(-40deg);
    -ms-transform:rotate(-40deg);
    ;}
.menu-mobile #bt-menu-mobile.close-bt-hamburguer span.bottom{ margin: -2px 0 0 -3px; top: 50%; width: 120%;
    -moz-transform:rotate(40deg);
    -webkit-transform:rotate(40deg);
    -o-transform:rotate(40deg);
    -ms-transform:rotate(40deg);
;}
.menu-mobile #bt-menu-mobile span{-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out}

#wrapper-menu-mobile{ position: fixed; width: 100%; height: 100%; top: 0; left: 100%;}