1
jqueryとcssを使用してスライドメニューを作成しようとしています。しかし、私はオープンクローズセクションで1つの問題があります。開いているボタンをクリックした後の不要なスペースの作成
.left-sidebar-menuのオープンボタンをクリックすると、左側の.left-sidebar-menuから不必要なスペースが開いています。どのように私はここに私を助けることができるそれを修正することができますか？
$(document).ready(function() {
var win = $box = $('.left-sidebar-menu');
$('.js-open-callback').on('click', function(event) {
event.stopPropagation();
/* $(".left-sidebar-menu").toggleClass("open-right");*/
jQuery.fn.blindRightToggle = function(duration, easing, complete) {
return this.animate({
marginLeft: -(parseFloat(this.css('marginLeft'))) < 0 ? 0 : this.outerWidth()
}, jQuery.speed(duration, easing, complete));
};
$box.blindRightToggle('slow');
\t $box.toggleClass("open-right");
});
});.header {
position: relative;
padding: 15px 15px 0px 0px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#1e88e5;
height:50px;
}
.containerMain {
position: relative;
width: 100%;
max-width: 1050px;
margin: 0px auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.left-sidebar-menu {
float: left;
position: relative;
width: 100%;
max-width: 40px;
min-width: 40px;
min-height: 500px;
background-color:#8e24aa;
}
.posts-container {
position: relative;
float: left;
width: 100%;
max-width: 700px;
min-height: 900px;
padding-left: 35px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#d81b60;
}
@media screen and (max-width:970px) {
.right-sidebar {
display:none; \t
} \t
.posts-container {
max-width: 744px;
min-height: 900px;
padding-left: 108px;
}
}
@media screen and (max-width:840px) {
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 35px;
\t padding-right: 21px;
}
}
@media screen and (max-width:580px) {
.left-sidebar-menu {
visibility:hidden;
\t opacity:0; \t
}
.open-right {
visibility:visible;
opacity:1; \t
}
.posts-container {
max-width: 700px;
min-height: 900px;
padding-left: 15px;
\t padding-right: 18px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas">
<div class="header"><div class="js-open-callback">OPEN</div></div>
<div class="containerMain">
<div class="left-sidebar-menu"></div>
<div class="posts-container">ss</div>
</div>
</div>
で
this.animate()に渡しているオブジェクトでmargingLeftプロパティを置き換えますか？ –