2018.7.19 横向收缩菜单动画

横向展开收缩菜单
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script class="jquery library" src="jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
        <title>
           横向展示菜单
        </title>
        <style>
            html, body{
                margin:0;
                padding:0;
                 100%;
                height: 100%;
            }
            .wrapper {
                 100%;
                height: 100%;
                background: url(images/a.jpg);
            }

            .leftbar{
                200px;
                height:100%;
                background: #fff;
                position: relative;   
                float: left;        
                border-right: 1px solid black;
                box-shadow: 3px 3px 3px gray;     
                z-index: 100;
            }
            img {
                 40px;
                height: 40px;
                position: absolute;
                right: -31px;
                top: 50%;
                cursor: pointer;
            }
            .rightbar{
                300px;
                height:100%;
                background: #fff;
                position: relative;
                left: -300px;
                /* left: 21px; */
                float: left;      
                border-right: 1px solid black;
                box-shadow: 3px 3px 3px gray;        
            }

        </style>       
    </head>
    <body>
        <div class="wrapper">
             <div class="leftbar">
                 <div class="arrow">
                    <img class="expand" src="images/right.png" alt="">
                    <img class="shrink" src="images/left.png" alt="" style="display: none;">
                 </div>
             </div>
             <div class="rightbar"></div>
        </div>
    </body>
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $(".arrow").click(function(){
                if($(".rightbar").css("left")=="-300px") {
                    $(".rightbar").stop().animate({left: "21px"});
                    $(".expand").hide();
                    $(".shrink").show();
                }else {
                    $(".rightbar").stop().animate({left: "-300px"});
                    $(".expand").show();
                    $(".shrink").hide();
                }
            });
        })
    </script>
</html>
效果如下：