Skip to content

Instantly share code, notes, and snippets.

@jasesmith

jasesmith/CSS-Animated-Hamburger-Icon.md

Last active August 29, 2015 14:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jasesmith/7217625aec9f7cfac635 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jasesmith/7217625aec9f7cfac635 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jasesmith renamed this gist Feb 11, 2015. 1 changed file with 0 additions and 0 deletions.
    0 CSS-Animated-Hamburger-Icon.markdown → CSS-Animated-Hamburger-Icon.md
    View file
    File renamed without changes.
  2. jasesmith revised this gist Feb 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion CSS-Animated-Hamburger-Icon.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    CSS Animated Hamburger Icon
    ---------------------------
    CSS Animated Hamburger (Menu Icon) with Transforms using a Single Element.
    CSS Animated Hamburger (Menu Icon) with Transforms using a Single Child Element.

    Forked from [Elijah Manor](http://codepen.io/elijahmanor/)'s Pen [CSS Animated Hamburger Icon](http://codepen.io/elijahmanor/pen/Igpoe/).

  3. jasesmith created this gist Feb 11, 2015.
    9 changes: 9 additions & 0 deletions CSS-Animated-Hamburger-Icon.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    CSS Animated Hamburger Icon
    ---------------------------
    CSS Animated Hamburger (Menu Icon) with Transforms using a Single Element.

    Forked from [Elijah Manor](http://codepen.io/elijahmanor/)'s Pen [CSS Animated Hamburger Icon](http://codepen.io/elijahmanor/pen/Igpoe/).

    A [Pen](http://codepen.io/jasesmith/pen/azELqZ) by [Jase Smith](http://codepen.io/jasesmith) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jasesmith/pen/azELqZ/license).
    6 changes: 6 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <header>
    <a href="#" class="menu-toggle">
    <span class="menu-icon"></span>
    <b class="menu-label">Menu</b>
    </a>
    </header>
    4 changes: 4 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    document.querySelector( ".menu-toggle" )
    .addEventListener( "click", function() {
    this.classList.toggle( "open" );
    });
    88 changes: 88 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    /* Setup Demo UI */
    body {
    background-color: #1c1e1f;
    height: 100%;
    color: grey;
    font-family: sans-serif;
    font-size: 15px;
    }

    header {
    position: relative;
    font-size: 2em;
    background: #15c5ec;
    padding: 1rem;
    border-radius: .1em;
    line-height: 1;
    width: 80%;
    margin: 0 auto;
    }

    .menu-toggle {
    color: white;
    text-decoration: none;
    }

    .menu-label {
    margin-bottom:-.2em;
    display:inline-block;
    vertical-align: middle;
    }

    .menu-icon + .menu-label {
    margin-left:.2em;
    }

    /* the animated menu icon */
    .menu-icon {
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: .5em;
    color: inherit;
    background: currentColor;
    border-radius: .5em;
    height: .4em;
    width: 2.6em;
    }

    .menu-icon:before,
    .menu-icon:after {
    border-radius: .5em;
    height: .4em;
    width: 100%;
    left: 0;
    background: currentColor;
    position: absolute;
    display: block;
    content: '';
    }
    .menu-icon:before {
    top: -.8em;
    }
    .menu-icon:after {
    top: .8em;
    }

    .menu-icon,
    .menu-icon:before,
    .menu-icon:after {
    transition: all .5s ease-in-out;
    }

    /* active/open menu icon */
    .open .menu-icon {
    background-color: transparent;
    transform: rotate(45deg) translate(0%, -50%);
    }
    .open .menu-icon:before,
    .open .menu-icon:after {
    top: 0em;
    }
    .open .menu-icon:before {
    transform: rotate(180deg);
    }
    .open .menu-icon:after {
    transform: rotate(270deg);
    }