我有一个关于响应式侧边栏菜单的问题。首先,我会从codepen.io
给你一个 DEMO如果更改了bowser宽度,则可以看到右上方的绿色按钮。单击此按钮时,将打开红色背景颜色div。但与此同时,如果您将弓形宽度更改为640px
至900px
,则红色div不会返回原始区域。
我如何解决这个问题,任何人都可以在这方面帮助我?
HTML
<div class="test_container">
<div class="left">
<div class="left_in"><div class="aa">ss</div></div>
</div>
<div class="r click_open_close">Click To Show Slide sLeft In</div>
<div class="right"><div class="bb"></div></div>
</div>
CSS
.test_container{
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
max-width: 980px;
min-width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background-color: #000;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 140px;
}
.left{
display: block;
position: absolute;
float: left;
width: 30%;
overflow: hidden;
padding: 0px;
bottom: 0;
top: 0;
left: 0;
background-color: red;
border-right: 1px solid #d8dbdf;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
z-index: 999 !important;
position: absolute;
float: left;
width: 0%;
height: 100%;
background-color: #f7f7f7;
opacity: 0;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: slideLeft;
animation-name: slideLeft;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(25rem);
transform: translateX(25rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideLeft {
0% {
-webkit-transform: translateX(15rem);
transform: translateX(15rem);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
.aa{
background-color: #f7f7f7;
/*background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
width: 0;
top: 0;
border-radius:0%;
z-index: 1000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
position: absolute;
right:0;
}
.click_open_close{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
z-index:999;
display:none;
}
.pp{
right:0px;
padding:10px;
color:#fff;
position:absolute;
background-color:green;
cursor:pointer;
}
.right{
display: block;
position: absolute;
width: 70%;
bottom: 0;
top: 0;
right: 0;
background-color: pink;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
@media all and (max-width: 840px) {
.left {
left:-60%;
}
.secret {
float: left;
display: block;
}
.right {
width: 100%;
}
.click_open_close{
display:block;
}
}
JS
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
$('.right').animate({
right: "-30%"
}, 200);
});
答案 0 :(得分:1)
试试这个
$(document).ready(function(e) {
$('.click_open_close').click(function() {
$('.left').animate({
left: "0%"
}, 200);
});
});
$(window).resize(function(e) {
var windoww = $(window).width();
if(windoww < 840){
location.reload(); //or set whatever animation you want to do for the sidebar gets back in place
};
});