Javascript 如何使用JQuery制作此菜单幻灯片？
我能够通过创建滑动菜单走到这一步，但是，我不确定我输入了什么错误，因为菜单不会为我滑动。我试图让菜单在单击“tab”时向右滑动，然后在再次单击“tab”时，我希望菜单收缩到屏幕的左侧 简言之，我的问题是： 1.为什么菜单不能滑动？Javascript 如何使用JQuery制作此菜单幻灯片？,javascript,jquery,html,slidetoggle,Javascript,Jquery,Html,Slidetoggle,我能够通过创建滑动菜单走到这一步，但是，我不确定我输入了什么错误，因为菜单不会为我滑动。我试图让菜单在单击“tab”时向右滑动，然后在再次单击“tab”时，我希望菜单收缩到屏幕的左侧 简言之，我的问题是： 1.为什么菜单不能滑动？ $（文档）.ready（函数（）{ $（“#tab”）.toggle（函数（）{ $（“#菜单”）.animate（{left:'0'}，500px）； $（“#tab”）.html（'-'）； }，函数（）{ $（“#菜单”）.animate（{left:'-60
$（文档）.ready（函数（）{
$（“#tab”）.toggle（函数（）{
$（“#菜单”）.animate（{left:'0'}，500px）；
$（“#tab”）.html（'-'）；
}，函数（）{
$（“#菜单”）.animate（{left:'-600'}，500px）；
$（“#tab”）.html（“+”）；
}); });
#菜单{
位置：绝对位置；
排名：0；
左：0；
高度：520px；
宽度：100%；
背景色：#000000；
文本对齐：居中；
边际：0px；
字体系列：helvetica；
颜色：#FFFFFF
不透明度：.9；}
a{
右边填充：60px；
文字装饰：无；
利润率：40像素；
颜色：#FFFFFF
}h1{
字体大小：20px；
填充：40px；
颜色：#FFFFFF
文本边距：50px；
}氢{
字体大小：60px；
填充：70px；
颜色：#FFFFFF}h3{
字体大小：15px；
填充：50px；
颜色：#FFFFFF}
#标签{
位置：绝对位置；
高度：90px；
宽度：90px；
右-6%；
顶部：0px；
背景色：#000000；
字体系列：helvetica；
颜色：#FFFFFF；
字体大小：50px；
游标：指针；}
标题
网站名称
+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab").toggle(function() {
$('#menu').animate({ left: '0' }, 500);
$("#tab").html ('-');
}, function() {
$('#menu').animate({ left: '-600' }, 500);
$("#tab").html ('+');
});
});
</script>
</head>
<body>
<div id="menu" style="
position: absolute;
top: 0;
left: -600px;
height: 450px;
width: 600px;
background-color:#000000;
text-align:center;
margin:0px;
background-color:#000000;
text-align:center;
font-family:helvetica;
color:#FFFFFF;
font-size:20px;
opacity:.9;
">
<a class="navItem" href="url">about me</a>
<a class="navItem" href="url">book</a>
<a class="navItem" href="url">resume</a>
<a class="navItem" href="url">ask</a>
<a class="navItem" href="url">archive</a>
<div id="menu-body"
style=height:400px;width:100%;float:left;font-size:100px;text-align:center;">
<br>title name</div>
<div id="menu-footer" style="text-align:center;"> website name</div>
<div id="tab" style="
position: absolute;
top: 8px;
left: 100%;
float: right;
font-family: monospace;
background-color:#000000;
color:#FFFFFF;
font-size:250px;
cursor:pointer;
">+</div>
</body>
</html>
$（文档）.ready（函数（）
{
$（“#tab”）.toggle（函数（）{
$（'#menu'）。动画（{left:'0'}，500）；
$（“#tab”）.html（'-'）；
}，函数（）{
$（'#菜单'）。动画（{左：'-600'}，500）；
$（“#tab”）.html（“+”）；
});
});
“我必须调整哪些值？我必须在何处添加新值才能使此菜单在单击选项卡时滑动？”---这与您的“因为我仍在尝试自学HTML”完全无关。这不是学习，而是寻找愿意免费为你工作的志愿者。学习是当你自己做一些简单的事情，而不是在互联网上的某个地方找到片段-1您有多个同名ID，并且缺少一些引号。@zerkms实际上我没有从任何地方复制和粘贴。我一直从你那里得到我所知道的。我并不是要求人们为我做所有的事情，我只是问如何让滑动函数工作，因为我不理解JQuery，也不知道应该把它放在哪里才能工作。我在寻求帮助，这就是我认为这个网站的目的，当你被难倒的时候，我在寻求帮助。你的评论很粗鲁，很明显你不明白我是从哪里来的，不是吗？“把它放在哪里好让它工作”——这不是一种学习。程序员不只是神奇地在代码中加入一些精灵的灰尘，这样代码就可以工作了，程序员知道你添加了什么以及为什么要添加。你不懂jquery？精彩-学习基本知识并返回。现在，您只想让我们修复您无法理解的代码（因为您可能将它带到了某个地方，而不是自己编写的）。这听起来很粗鲁，是的，但如果有人说他一开始想学点东西，后来又因为无聊地学习基础知识而要求修改代码，那就太傻了。显然，你可以看出我不是程序员。我在这个领域没有多少经验。我是初学者，每个初学者都需要朝正确的方向努力。在过去的几周里，我一直在努力独立完成这项工作。我一直在阅读html和css，然后应用我所学的知识，在反复尝试重新编写行之后，有些东西仍然不起作用。即使在回顾并阅读了一些章节之后，我仍然不确定我做错了什么。所以我想我可以来这里寻求帮助。不幸的是，大多数人只是减少了人的数量。好吧，所以我对我原来的帖子做了修改——我把标签后面的样式改成了中的css样式，以清理它。这个好看吗？还有，你把它放在哪个编辑器中，因为当我去测试它时，它会正确显示，但它不会来回切换，当它应该滚动内容时，菜单会显示在网页内容的后面，因此我有不透明性。在我的例子中，我使用了jquery-1.7.2.min.js
，但在你的例子中，你有js/jquery-1.4.min.js
。如果您复制了这一行，但没有更改jquery版本，这可能就是它无法工作的原因。关于显示在页面内容后面的菜单，您可以使用z-index
属性更改元素的顺序。该属性仅适用于位置为“绝对”或“相对”的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#tab").toggle(function() {
$('#menu').animate({ left: '0' }, 500);
$("#tab").html ('-');
}, function() {
$('#menu').animate({ left: '-600' }, 500);
$("#tab").html ('+');
});
});
</script>
</head>
<body>
<div id="menu" style="
position: absolute;
top: 0;
left: -600px;
height: 450px;
width: 600px;
background-color:#000000;
text-align:center;
margin:0px;
background-color:#000000;
text-align:center;
font-family:helvetica;
color:#FFFFFF;
font-size:20px;
opacity:.9;
">
<a class="navItem" href="url">about me</a>
<a class="navItem" href="url">book</a>
<a class="navItem" href="url">resume</a>
<a class="navItem" href="url">ask</a>
<a class="navItem" href="url">archive</a>
<div id="menu-body"
style=height:400px;width:100%;float:left;font-size:100px;text-align:center;">
<br>title name</div>
<div id="menu-footer" style="text-align:center;"> website name</div>
<div id="tab" style="
position: absolute;
top: 8px;
left: 100%;
float: right;
font-family: monospace;
background-color:#000000;
color:#FFFFFF;
font-size:250px;
cursor:pointer;
">+</div>
</body>
</html>