0

したがって、このコードをスライドメニュー用に作成しましたが、問題が1つだけあり、スライドしていません。JQueryに何か問題がありますか？

他の人も同じ問題を抱えているようで、この答えを検索してみましたが、間違って書いたものが見つかりません。

<html> <head> <meta charset="utf-8" />  
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.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:50px;
        left:-100%;
        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:-80px;
        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">title</a>                 
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a>                         
        <a class="navItem" href="url">title</a></h1>            
        <h2>name</h2>               
        <h3>website title</h3>              
        <div id="tab"> +        
        </div>  
</body>

</html>
4

2 に答える 2

1

animate関数の2番目のプロパティは、単位が接続されていないミリ秒単位の時間です。

に変更します

$('#menu').animate({ left: '0' }, 500);

コメント後に編集： 撤回するには、撤回コードも修正する必要があります

$('#menu').animate({ left: '-600' }, 500);

オーバーラップの問題については、z-indexを1に設定します。#menuとposition：relative; およびz-index：0; あなたがそれをオーバーラップさせたいものは何でも。これらの要素がHTMLのネストに関して同じレベルにある限り。問題が発生した場合は、z-indexに関するチュートリアルをいくつか調べてください。

于 2012-08-26T04:29:48.460 に答える
1

修正は次のとおりです：http：//pastebin.com/raw.php？i = SUz4FkzL

リックが行ったのとまったく同じ変更を加えたので、彼に「承認」を与える必要があります

于 2012-08-26T15:33:04.827 に答える