-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">しばらくの間を選択し、2番目のものはに一致し<div id="tab">ます。また、CSSも間違っていた可能性があります。<style>cssにはタグを使用することをお勧めします。

于 2012-08-24T11:09:59.417 に答える