關閉畫布菜單不會將內容推開

Question

所以我有這個關閉畫布菜單，幾乎可以工作，但不是很完美！ 菜單從右側推入，但網站的其餘部分未被推到左側。我很確定我錯過了CSS中的某些東西，即我正在切換的類（.toggleNav）！ 雖然不知道，需要你的幫助！非常感謝！！

$(document).ready(function(e) { 
 
\t 
 
\t $('#toggleMenu').click(function() { 
 
\t $('#siteWrapper').toggleClass('toggleNav'); 
 
\t }); 
 
\t 
 
});

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

<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> 
 

 

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

Answer 1

與另外的包裝，它的工作：

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

 
$(function() { 
 
    $('.toggle').click(function() { 
 
    toggleNav(); \t 
 
    }); 
 
});

.toggle {float:right;margin-right:30%;cursor:pointer;} 
 

 
#siteWrapper { 
 
\t position: relative; 
 
\t overflow-x: hidden; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: lightgrey; \t 
 
} 
 
#siteCanvas { 
 
\t width: 100%; 
 
\t height:100%; 
 
\t position:relative; 
 
\t -webkit-transform: translateX(0); 
 
\t transform: translateX(0); 
 
\t -webkit-transition: .3s ease all; 
 
\t transition: .3s ease all; 
 
\t padding: 5% 0; 
 
} 
 
#siteMenu { 
 
\t width: 250px; 
 
\t height: 100%; \t 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: -300px; 
 
\t background: black; 
 
\t color: white; 
 
\t border-left: 1px solid white; 
 
\t z-index: 5000; 
 
\t padding-top: 5%; 
 
\t font-size: 1.2em; 
 
} 
 
#siteWrapper.showNav #siteCanvas { 
 
\t -webkit-transform: translateX(-300px); 
 
\t transform: translateX(-300px); \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="siteWrapper"> 
 
<div id="siteCanvas"> 
 
<div id="siteMenu"> 
 
    <nav>MENU 
 
    <ul> 
 
    <li>home</li> 
 
    <li>away</li> 
 
    <li>tickets</li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
    <button class="toggle" type="button">toggle</button> 
 
<h1>the</h1> 
 
    <h3>actual</h3> 
 
    <p>site with some lorem ipsum to show the push effect</p> 
 
    
 
</div> 
 
</div>

Answer 2

#siteWrapper.toggleNav { /* quite possibly wrong... */ 
-webkit-transform: translateX(-400px); 
transform: translateX(-400px); 
} 

Answer 3

這是真正的解決方案。 ＃siteWrapper.toggleNav，＃siteWrapper.toggleNav #canvasWrapper {-webkit-transform：translateX（-400px）; transform：translateX（-400px）;} ＃siteWrapper.toggleNav #canvasWrapper { Right：-400px; }

Answer 4

下面是代碼，我複製它和固定 - 我的意思是我做了我能夠 -

* {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:shown; 
position:relative; 
width: 100%; 
height: 40%; 
background: lightgrey; 
} 
#canvasWrapper { 
position:absolute; 
top: 0; 
right:-400px; 
width: 400px; 
height: 100%; 
display:none; 
background: #3186CD;  
} 
#siteWrapper, #canvasWrapper { 
-webkit-transform: translateX(0); 
transform: translateX(0); 
-webkit-transition: .3s ease all; 
transition: .3s ease all; 
} 
#siteWrapper.toggleNav { 
left:-400px; 
overflow:; 
} 
#siteWrapper.toggleNav #canvasWrapper{ 
right:-400px; 
display:block; 
}