我正在尝试创建一个滑动菜单，这给我带来了一些麻烦。
无论如何都不是 CSS 和 JQuery 大师，正在寻找一些指示，尤其是 JQ/JS，因为切换看起来好多了，但无法让它适应一个类(为什么我有一些 CSS 类带有“- on") 调出菜单。
我浏览了一些在线指南，但它们并没有完全按照我的要求进行操作，而且在复制粘贴时我也没有完全理解它们。
尝试从头开始构建我自己的，但没有成功，此刻灰色出现在点击上，但导航并没有随之而来。
主要目标是创建一个基本的滑动菜单，将内容“推”到右边。
标记
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/slide.css" rel="stylesheet" type="text/css"/>
<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script>
$(function () {
$(".burger_on").click(function () {
$(".page-wrap").removeClass("main-nav");
$(".push-wrap").removeClass("push-wrap");
$(".page-wrap").addClass("main-nav-on");
$(".push-wrap").addClass("push-wrap-on");
return false;
});
});
$(function () {
$(".burger_off").click(function () {
$(".page-wrap").removeClass("main-nav-on");
$(".push-wrap").removeClass("push-wrap-on");
$(".page-wrap").addClass("main-nav");
$(".push-wrap").addClass("push-wrap");
return false;
});
});
</script>
<title></title>
</head>
<body>
<div class="page-wrap">
<div class="main-nav">
<ul>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Home</li>
</ul>
</div>
<div class="push-wrap">
<button class="burger_on">☰</button>
<button class="burger_off">☰</button>
<div class="content">
@RenderBody()
</div>
</div>
</div>
</body>
CSS
body {
font-family: Arial;
background-repeat: repeat-x;
background-position: center top;
background-color: green;
font-size: 0.8em;
}
.page-wrap {
height:100%;
width:100%;
}
.main-nav { /* change width to 20% when menu active*/
width:0%;
transition: 0.3s ease;
background-color: darkgrey;
height:100%;
}
.main-nav-on {
float: left;
width:20%;
transition: 0.3s ease;
background-color: darkgrey;
height: 100%;
}
.push-wrap { /* change width to 80% when menu active*/
width:100%;
height: 100%;
}
.push-wrap-on {
width:80%;
height: 100%;
}
最佳答案
首先，head 中的脚本需要一个 $(document).ready()包装器，因此它们不会在加载 DOM 之前执行。
其次，您可以设置一个标志变量来保存菜单的状态，而不是查询 css。
第三，最简单的方法是使用绝对定位并改变left属性。
( Demo )
$(document).ready(function () {
var open = false
$("#burger").click(function () {
if (!open) { // open it
open = true;
$('#off-canvas').css('left', '0px');
$('#canvas').css('left', '200px');
} else { // close it
open = false;
$('#off-canvas').css('left', '-200px');
$('#canvas').css('left', '0px');
}
});
});
在引用单个元素时，您应该使用唯一 ID 而不是类。
如果您希望#canvas 调整大小而不是移动，请在#canvas 上设置right: 0;
html, body {
margin: 0;
height: 100%;
}
.page-wrap {
height:100%;
}
#off-canvas {
position: absolute;
left: -200px;
background-color: darkgrey;
height:100%;
width: 200px;
transition: left 0.3s ease-in-out;
}
#canvas {
left: 0px;
width: 100%;
position: absolute;
height: 100%;
overflow: auto;
transition: left 0.3s ease-in-out;
}
这是 HTML 最终的样子
<div id="off-canvas">
<ul>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Home</li>
</ul>
</div>
<div id="canvas">
<button id="burger">☰</button>
<div class="content">
@RenderBody()
</div>
</div>
关于javascript - JQuery CSS 菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30671262/