Итак, у меня это из меню холста, которое ALMOST работает, но не совсем! Меню нажимает справа, но остальная часть сайта не сдвигается влево. Я совершенно уверен, что в 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>
Спасибо за ваши отзывы, я пробовал это раньше, он перемещает меню на 800 пикселей влево, а не на 400 пикселей ... Я предполагаю, что это сумма 400px fr om #siteWrapper плюс 400px из #canvasWrapper? – Ollie
Хорошо, тогда примените css только на .toggleNav, поэтому, если он перемещается на 400 пикселей, вы увидите, что offcanvas будет отображаться. – Ahmadbaba46
теперь только серый холст перемещается влево, но меню холста не перемещается ... – Ollie