-1

通过创建滑动菜单，我能够做到这一点，但是，我不确定我输入了什么错误，因为菜单不会为我滑动。我试图让菜单在单击“选项卡”时向右滑动，然后当再次单击“选项卡”时，我希望菜单缩回到屏幕的左侧。

简而言之，我的问题是：

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

1 回答 1

0

它似乎以这种形式工作：

<!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也可能是错误的。最好<style>为 css 使用标签。

于 2012-08-24T11:09:59.417 回答