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