왼쪽슬라이드밀어내기메뉴(20150828)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    .wrap {
        height: 800px;
        width: auto;
        white-space: nowrap;
        overflow-y:hidden;
    }
    .wrap > div {
        float:left;
        height: 800px;
    }
    .wrap #menu {
        width: 50px;
        background-color: red;
        color: white;
    }
    .wrap #menu .slidemenu {
        display: none;
        white-space: nowrap;
    }
    .wrap .contents {
        width: 300px;
    }
  </style>
 </head>
 <body>
    <div class="wrap">
        <div id="menu">
            <div><button>메뉴</button></div>
            <div class="slidemenu">
                <p>메인메뉴 1</p>
                <p>메인메뉴 2</p>
                <p>메인메뉴 3</p>
                <p>메인메뉴 4</p>
                <p>메인메뉴 5</p>
            </div>
        </div>
        <div class="contents"><img src="http://lorempixel.com/300/800/nature"></div>
        <div class="contents"><img src="http://lorempixel.com/300/800/cats"></div>
        <div class="contents"><img src="http://lorempixel.com/300/800/city"></div>
        <div class="contents"><img src="http://lorempixel.com/300/800/food"></div>
        <div class="contents"><img src="http://lorempixel.com/300/800/sports"></div>
    </div>
    <script>
        var menuopen = false;
        $( "#menu button" ).click(function() {
            if( ! menuopen ) {
                $("#menu").animate({"width":"300px"},1000,function(){ menuopen=true; });
                $(".wrap #menu .slidemenu").show();
            } else {
                $("#menu").animate({"width":"50px"},1000,function(){ menuopen=false; });
                $(".wrap #menu .slidemenu").hide();
            }
        });
    </script>
</body>
</html>