jquery - Canvas 菜单上的内容不会推送内容

因此，我有这个ALMOST可以使用的画布菜单，但不是完全可以的！
菜单从右侧推入，但是站点的其余部分未推到左侧。我非常确定我在CSS中缺少某些东西，即我要切换的类（.toggleNav）！
虽然无法弄清楚，需要您的帮助！非常感谢！！

$(document).ready(function(e) {

	$('#toggleMenu').click(function() {
	$('#siteWrapper').toggleClass('toggleNav');
	});

});

* {padding:0;margin:0;font-family:Helvetica,sans-serif;font-weight:normal}
body, html {width: 100%;height: 100%;}
ul {list-style:none;padding-left:10px;}

#siteWrapper{
	overflow:hidden;
	position:relative;
	width: 100%;
	height: 40%;
	background: lightgrey;
}
#canvasWrapper {
	position:absolute;
	top: 0;
	right:-400px;
	width: 400px;
	height: 100%;
	background: #3186CD;
}
#siteWrapper, #canvasWrapper {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition:	.3s ease all;
	transition: .3s ease all;
}
#siteWrapper.toggleNav #canvasWrapper { /* quite possibly wrong... */
	-webkit-transform: translateX(-400px);
	transform: translateX(-400px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="siteWrapper">
    <h1>Off Canvas Menu</h1><br>
    <h3>This should slide to the left! Some more text to have something left on the canvas...</h3><br>


	<div id="canvasWrapper" >
    	<div id="menu">
        	<ul>
            	<li>home</li>
                <li>infos</li>
                <li>something</li>
                <li>contact</li>
            </ul>
        </div>
    </div>
</div>
<a href="#" id="toggleMenu">toggle Menu</a>

最佳答案

这确实是解决方案。
      ＃siteWrapper.toggleNav，＃siteWrapper.toggleNav #canvasWrapper {
    -webkit-transform：translateX（-400px）;
    转换：translateX（-400px）;}
    ＃siteWrapper.toggleNav #canvasWrapper {
     右：-400px；
    }