A really nice Hamburg menu button. Simple and yet so brilliant.
First the basic framework with HTML:

<button class="ws-navigation__button">
    <span class="ws-navigation__hamburger">
        <span class="ws-navigation__button-line"></span>
        <span class="ws-navigation__button-line"></span>
        <span class="ws-navigation__button-line"></span>
    </span>
    <span class="ws-navigation__cross">
        <span class="ws-navigation__button-line"></span>
        <span class="ws-navigation__button-line"></span>
    </span> 
</button>

… and then a little bit of CSS:

<style>
    selector {
        z-index: 99;
    }
    
    .ws-navigation__button {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        border: none;
        padding: 0;
        background: none;
        cursor: pointer;
    }
    
    .ws-navigation__hamburger,
    .ws-navigation__cross {
        display: block;
        width: 60%;
        height: 60%;
        position: absolute;
        top: 20%;
        left: 20%;
    }
    
    .ws-navigation__button-line {
        display: block;
        width: 100%;
        height: 2px;
        position: absolute;
        background-color: #000;
    }
    
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(2) {
        width: 75%;
    }
    
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(1),
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(2),
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(3) {
        right: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transition: width 0.15s ease-in-out;
        -webkit-transition: width 0.15s ease-in-out;
    }
    
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(1) {
        top: calc(50% - 4px);
        transition-delay: 0.4s;
        -webkit-transition-delay: 0.4s;
    }
    
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(2) {
        top: 50%;
        transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;
    }
    
    .ws-navigation__hamburger .ws-navigation__button-line:nth-child(3) {
        top: calc(50% + 4px);
        transition-delay: 0.6s;
        -webkit-transition-delay: 0.6s;
    }
    
    .ws-navigation__button--clicked .ws-navigation__hamburger .ws-navigation__button-line {
        width: 0;
    }
    
    .ws-navigation__button--clicked .ws-navigation__hamburger .ws-navigation__button-line:nth-child(1) {
        transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
    }
    
    .ws-navigation__button--clicked .ws-navigation__hamburger .ws-navigation__button-line:nth-child(2) {
        transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
    }
    
    .ws-navigation__button--clicked .ws-navigation__hamburger .ws-navigation__button-line:nth-child(3) {
        transition-delay: 0.3s;
        -webkit-transition-delay: 0.3s;
    }
    
    .ws-navigation__cross {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    .ws-navigation__cross .ws-navigation__button-line:nth-child(1) {
        width: 0;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transition: width 0.15s ease-in-out;
        -webkit-transition: width 0.15s ease-in-out;
        transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
    }
    
    .ws-navigation__cross .ws-navigation__button-line:nth-child(2) {
        width: 2px;
        height: 0;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transition: height 0.15s ease-in-out;
        -webkit-transition: height 0.15s ease-in-out;
        transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
    }
    
    .ws-navigation__button--clicked .ws-navigation__cross .ws-navigation__button-line:nth-child(1) {
        width: 100%;
        transition-delay: 0.5s;
        -webkit-transition-delay: 0.5s;
    }
    
    .ws-navigation__button--clicked .ws-navigation__cross .ws-navigation__button-line:nth-child(2) {
        height: 100%;
        transition-delay: 0.6s;
        -webkit-transition-delay: 0.6s;
    }
</style>

Now we can simply swap classes with the OnClick event via jQuery and marvel at the magic. Mmh, yummi. 🙂

Leave a Reply

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