如何使用JQuery制作此菜单幻灯片

How do you make this menu slide using JQuery?

本文关键字：菜单幻灯片何使用 JQuery 更新时间：2023-09-26

我能够创建滑动菜单，但是，我不确定我输入错了什么，因为菜单不会为我滑动。我试图在单击"选项卡"时使菜单向右滑动，然后再次单击"选项卡’时，我希望菜单缩回到屏幕左侧。

简而言之，我的问题是：

1.为什么菜单不滑动

<html> <head> <meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.min.js"></script> <script type="text/javascript">

 $(document).ready(function() {
    $("#tab").toggle(function() { 
        $('#menu').animate({ left: '0' }, 500px);
        $("#tab").html('-');
    }, function() {
        $('#menu').animate({ left: '-600' }, 500px);
        $("#tab").html('+');
    }); }); </script>
<style type="text/css">

#menu{
    position:absolute;
    top:0;
    left:0;
    height:520px;
    width:100%;
    background-color:#000000;
    text-align:center;
    margin:0px;
    font-family:helvetica;
    color:#FFFFFF
    opacity:.9;  }
      a{ 
        padding-right:60px; 
        text-decoration:none;
        margin:40px;
        color:#FFFFFF
        } h1{
     font-size:20px;
     padding:40px;
     color:#FFFFFF
     text-margin:50px;
    } h2{
     font-size:60px;
     padding:70px;
     color:#FFFFFF } h3{
     font-size:15px;
     padding:50px;
     color:#FFFFFF }
 #tab{
      position:absolute;
      height:90px;
      width:90px;
      right:-6%;
      top:0px;
      background-color:#000000;
      font-family:helvetica;
      color:#FFFFFF;
      font-size:50px;
      cursor:pointer; }

</style>
</head>

<body>
<div id="menu"><h1>
                   <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></h1>

<h2>title</h2>

<h3>websitetitle</h3>
            
<div id="tab"> +
</div>
</body>

它似乎以这种形式工作：

<!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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="navItem" href="url">book</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="navItem" href="url">resume</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="navItem" href="url">ask</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <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>

$(".tab")错误，应该是$("#tab")。第一个将选择<div class="tab">，而第二个将匹配<div id="tab">。CSS也可能是错误的。css最好使用<style>标记。