HTML
<div class="panelmenu"></div>
CSS
.panelmenu {
position: fixed;
z-index: 2;
top: 0;
left: 0;
transform: translateX(-110%);
transition: all 0.6s;
width: 100%;
height:100%;
background-color:#ffffff;
opacity: 0;
}
.panelmenu.active {
transform: translateY(0%); opacity: 1;
}
.panelmenu.closing {
transform: translateX(110%);
opacity: 0;
}
jQuery
$(function () {
$(".navToggle").click(function () {
$(this).toggleClass("active");
if ($(this).hasClass("active")) {
// パネルを左から表示
$(".panelmenu").removeClass("closing").addClass("active");
document.body.style.overflow = "hidden";
} else {
// パネルを右に引っ込める
$(".panelmenu").addClass("closing");
// アニメーションが終わった後に closing クラスを取り除く
setTimeout(function () {
$(".panelmenu").removeClass("active closing");
document.body.style.overflow = "visible";
}, 600); // 600ms は transition の時間と一致
}
});
});
