클릭하면 열리는 menu bar

<!-- menuOpen -->
        <div class="menuOpen">
            <button class="open" type="button">
                <img src="img/open-icon.png" alt="메뉴오픈">
            </button>
            <div class="menuWrap">
                <a href="#" class="close"><img src="img/close.png" alt="닫기"></a>
                <a href="#" class="close en">close</a>
                <ul class="tit en animate" data-animate="motion">
                    <li><a href="#"><span><b>Design</b></span></a></li>
                    <li><a href="#"><span><b>Capabilities</b></span></a></li>
                    <li><a href="#"><span><b>Cases</b></span></a></li>
                    <li><a href="#"><span><b>Contact</b></span></a></li>
                </ul>
            </div>
        </div>

.menuOpen button.open{
/*측면에 고정되어 있는 open 메뉴 버튼*/
    background: none;
    border:none;
    position:fixed;
    z-index:100;
    right:0;
    top:50%;
    transform: translateY(-50%);
    padding: 30px 22px;
    box-sizing: border-box;
}
.menuOpen button.open:before{
/*측면에 고정되어 있는 open 메뉴 버튼의 흐린 배경*/
    content:'';
    width:100%;
    height:100%;
    background: #f5f5f5;
    position:absolute;
    right: -100px;
    top:0;
    z-index: -1;
    transition: all 0.5s;
}
.menuOpen button.open:hover::before, .menuOpen button.open:focus::before{
/*hover시에 흐린배경이 표시된다.*/
    right:0;
    cursor: pointer;
}

/* menuWrap의 기본 레이아웃 */
.menuOpen .menuWrap {
    width:100%;
    height:100vh;
    position:fixed;
    right:0;
    z-index:100;
    background: #eee;
}
.menuOpen .menuWrap .tit{
    color:#ccc;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:25%;
    font-size: 60px;
}
.menuOpen .menuWrap .tit li a{
    margin-bottom:20px;
    display:inline-block;
    position:relative;
    transition: all 0.3s;
}
.menuOpen .menuWrap .tit li a:hover, .menuOpen .menuWrap .tit li a:focus{
    transform:translateX(30px);
    color:#333;

}
/* underline */
.menuOpen .menuWrap .tit li a:after{
    content:'';
    width: 0%;
    height: 2px;
    background: #333;
    position: absolute;
    bottom:-5px;
    left:0;
    transition: all 0.3s;
}
.menuOpen .menuWrap .tit li a:hover::after, .menuOpen .menuWrap .tit li a:focus::after{
    width:100%;
} 
.menuOpen .menuWrap .close:nth-child(1){
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:30px;
}
.menuOpen .menuWrap .close.en{
    position:absolute;
    right:50px;
    top:50px;
    font-size: 25px;
    border-bottom:1px solid #888;
    color:#888;
}

/* menuWrap 열기 */
/* .menuWrap의 평소상태와 menuOpen 버튼을 클릭했을 때 상태 */
.menuOpen .menuWrap{
    width:0;
    overflow: hidden;
    transition:0;
    transform: skewY(40deg);
    opacity:0;
}
/* display none은 transiton 안먹힘. */
.menuOpen .menuWrap.on{
    width: 100%;
    right:0;
    transform: skewY(0deg);
    opacity:1;
    transition: all 0.5s;
}
.menuOpen .menuWrap .tit{
    display: none;
}
.menuOpen .menuWrap.on .tit{
    display: block;
}

$(function(){
    $(".menuOpen button.open").on("click", function(){
        $(".menuOpen .menuWrap").addClass('on');
    });
    $(".menuOpen .menuWrap .close").on("click", function(){
        $(".menuOpen .menuWrap").removeClass('on');
    });
});