横向展开收缩菜单
<!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>
效果如下: