CSS Animated Hamburger Icon for Bootstrap

CSS Animated Hamburger Icon for Bootstrap.markdown

CSS Animated Hamburger Icon for Bootstrap

Bootstrap Animated Hamburger Icon with CSS transforms. No changes to any HTML required, just add the classes. The built-in "collapsed" class on the button will take care of transformations.

Some pens around use JavaScript to toggle .collapsed class on clicked .navbar-toggle (AKA the hamburger) since they suppose there is a bug in Bootstrap.js that doesn't toggle that class. It seems, instead (I didn't inspect the code), that .collapsed class is added only while using a class or an anchor name as collapsable target element. (credits: http://stackoverflow.com/a/31076793/877464)

A Pen by Giuseppe Caruso on CodePen.

License.

index.html

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#main-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Animated Burger, Bootstrap</a>
    </div>
    <div id="main-nav" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page One</a></li>
            <li><a href="#">Page Two</a></li>
        </ul>
    </div>
</div>

scripts

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

style.css

.navbar {
    .navbar-toggle {
        &:hover, &:focus {
            background-color: transparent;  
        }
        &.collapsed {
            .icon-bar {
                background-color: #666;
                &:nth-of-type(1) {
                    transform: rotate(0deg);
                    top: 0;
                }
                &:nth-of-type(2) {
                    opacity: 1;
                    width: 100%;
                    margin-left: 0;
                }
                &:nth-of-type(3) {
                    transform: rotate(0deg);
                    bottom: 0;
                }
            }
        }
        .icon-bar {
            position: relative;
            transition: all 500ms ease-in-out;
            background-color: orangered;
            
            &:nth-of-type(1) {
                transform: rotate(45deg);
                top: 6px;
            }
            &:nth-of-type(2) {
                opacity: 0;
                width: 0;
                margin-left: 50%;
            }
            &:nth-of-type(3) {
                transform: rotate(-45deg);
                bottom: 6px;
            }
        }
    }

}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />