如何为导航菜单创建过渡？

Question

我在我的网站上创建了一个JS，它可以翻转我的课程，将整个网站推向左侧并隐藏导航。

如何添加转换以让网站向左侧滑动？

JS

<script>
  (function() {
    var body = $('body');
    $('.menu-toggle').bind('click', function() {
      body.toggleClass('menu-open');
      return false;
    });
  })();
</script>

CSS：

.divright{
    Background-color: #F76926;
    height: 500px;
    width: 76.5%;
    float: right;
    border-radius:20px;
    padding-left: 3%;
    position: relative;
    float:right;
}

.buttondiv {
    height: 2.5%;
    width: 3%;
    z-index:1;
    float:center;
    position: fixed;
    margin-top: 1%;
    margin-left: 20%
}

.divleft{
    Background-color: #4B4B4B;
    height: 500px;
    width: 19.5%;
    float: left;
    border-radius:20px;
    position: relative;
    float:left;
}

.menu-open{
    left:-20%;
}