Skip to content

Instantly share code, notes, and snippets.

@agragregra

agragregra/mobile-menu.html

Created December 1, 2015 14:42
Show Gist options
  • Save agragregra/eb89e4425442b559207c to your computer and use it in GitHub Desktop.
Save agragregra/eb89e4425442b559207c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. agragregra created this gist Dec 1, 2015.
    47 changes: 47 additions & 0 deletions mobile-menu.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    <!-- HTML -->
    <a href="#" class="toggle-mnu hidden-lg"><span></span></a>

    <!-- SASS -->
    .toggle-mnu
    display: block
    width: 28px
    height: 28px
    margin-top: 14px

    span:after, span:before
    content: ""
    position: absolute
    left: 0
    top: 9px

    span:after
    top: 18px

    span
    position: relative
    display: block

    span, span:after, span:before
    width: 100%
    height: 2px
    background-color: #fff
    transition: all 0.3s
    backface-visibility: hidden
    border-radius: 2px


    &.on span
    background-color: transparent

    &.on span:before
    transform: rotate(45deg) translate(-1px, 0px)

    &.on span:after
    transform: rotate(-45deg) translate(6px, -7px)

    <!-- jQuery -->
    $(".toggle-mnu").click(function() {
    $(this).toggleClass("on");
    $(".main-mnu").slideToggle();
    return false;
    });