Question

所以我有这个关闭帆布菜单，ALMOST可以工作，但不是很好！菜单从右侧推入，但网站的其余部分未向左推。我很确定我在CSS中遗漏了一些内容，即我正在切换的课程（.toggleNav）！虽然无法弄清楚，需要你的帮助！非常感谢!!

title

Doctor

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

Answer 1

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

Answer 2

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

Answer 3

这是代码，我复制并修复 - 我的意思是我尽我所能 -

* {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;
}

Answer 4

使用额外的包装器：

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

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

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

关闭画布菜单不会推送内容

4 个答案: