u01jmg3/menu.html

## menu.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Menu</title>
        <style>
            ul.drawer { width:300px; background: #5f626a; display:none; }
            ul.drawer li { padding:20px 30px; color: #bbb; border-bottom:1px solid #4a4f5b; font-family: arial; }
            ul.drawer li:hover { background: #6b6e75; cursor:pointer; }

            .menu-container { width:70px; height:70px; background: #4b505c; float:left; position: relative; }
            .menu-container:hover { background: #444955; cursor:pointer; }
            .menu { width:100%; height:70px; background: #3c414d; }

            .bar1 { width:19px; height:2px; background: #bbb; position: absolute; top:22px; left:24px;
                -webkit-transform: rotate(00deg);
                -webkit-transform-origin: 9.5px 0px;
                -moz-transform: rotate(0deg);
                -moz-transform-origin: 9.5px 0px;
                -ms-transform: rotate(0deg);
                -ms-transform-origin: 9.5px 0px;
                transform: rotate(0deg);
                transform-origin: 9.5px 0px;
            }

            .bar2 { width:19px; height:2px; background: #bbb; position: absolute; top:32px; left:24px;
                -webkit-transform: rotate(0deg);
                -webkit-transform-origin: 9.5px 0px;
                -moz-transform: rotate(0deg);
                -moz-transform-origin: 9.5px 0px;
                -ms-transform: rotate(0deg);
                -ms-transform-origin: 9.5px 0px;
                transform: rotate(0deg);
                transform-origin: 9.5px 0px;
            }

            .bar3 { width:19px; height:2px; background: #bbb; position: absolute; top:42px; left:24px;
                -webkit-transform: rotate(0deg);
                -webkit-transform-origin: 9.5px 0px;
                -moz-transform: rotate(0deg);
                -moz-transform-origin: 9.5px 0px;
                -ms-transform: rotate(0deg);
                -ms-transform-origin: 9.5px 0px;
                transform: rotate(0deg);
                transform-origin: 9.5px 0px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="menu">
                <a href="#" class="menu-container toggle-drawer">
                    <div class="bar1 menu-bar"></div>
                    <div class="bar2 menu-bar"></div>
                    <div class="bar3 menu-bar"></div>
                </a>
            </div>
            <ul class="drawer">
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
                <li>Team</li>
                <li>Terms</li>
            </ul>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://jqueryrotate.googlecode.com/svn-history/r155/trunk/jQueryRotateCompressed.js"></script>
        <script>
        $(document).ready(function(){
            $('.drawer').hide();
            $('.toggle-drawer').show();

            $(document).on('click', '.toggle-drawer', function(){
                $('.drawer').slideToggle();
            });

            var toggle = true;

            $(document).on('click', '.menu-container', function(){
                if(toggle === true){
                    $('.menu-bar').stop().animate({
                        top: 32,
                        width: 23,
                        left: 22,
                    }, 150, function(){
                        $('.menu-bar').animate({
                            left: 24,
                            width: 19
                        }, 150, function(){
                            $('.bar1').rotate({
                                animateTo: -132,
                                duration: 250
                            });

                            $('.bar2').rotate({
                                animateTo: -48,
                                duration: 250
                            });

                            $('.bar3').rotate({
                                animateTo: -48,
                                duration: 250
                            });
                        });
                    });

                    toggle = false;
                    return false;
                } else if(toggle === false){
                    $('.bar1').stop().rotate({
                        animateTo: 0,
                        duration: 250
                    });

                    $('.bar2').stop().rotate({
                        animateTo: 0,
                        duration: 250
                    });

                    $('.bar3').stop().rotate({
                        animateTo: 0,
                        duration: 250
                    });

                    $('.menu-bar').stop().animate({
                        width:19
                    }, 251, function(){
                        $('.bar1').animate({
                            top: 22
                        }, 150);

                        $('.bar2').animate({
                            top: 32
                        }, 150);

                        $('.bar3').animate({
                            top: 42
                        }, 150);
                    });

                    toggle = true;
                    return false;
                };
            });
        });
        </script>
    </body>
</html>