0

私はこのスタイルをメニーにしようとしています

私はこのガイドを使用してhtmlファイルを作成しています-1つのファイルに作成するだけです

スライドしないという問題があります。

Htmlコード-私はこれではありませんhtmlコードにエラーがあります:

<ul>
        <li class="green" id="dropper">
            <p><a href="#">Home</a></p>
            <p class="subtext">The front page</p>
        </li>
        <li class="yellow" id="dropper">
            <p><a href="#">About</a></p>
            <p class="subtext">More info</p>
        </li>
        <li class="red" id="dropper">
            <p><a href="#">Contact</a></p>
            <p class="subtext">Get in touch</p>
        </li>
        <li class="blue" id="dropper">
            <p><a href="#">Submit</a></p>
            <p class="subtext">Send us your stuff!</p>
        </li>
        <li class="purple" id="dropper">
            <p><a href="#">Terms</a></p>
            <p class="subtext">Legal things</p>
        </li>
    </ul>

Jqueryコード-問題はここにある可能性があります:

    $(document).ready(function(){
        //Remove outline from links
        $("a").click(function(){
            $(this).blur();
        });

        //When mouse rolls over
        $("#dropper").mouseover(function(){
            $(this).stop().animate({height:'300px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

        //When mouse is removed
        $("#dropper").mouseout(function(){
            $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });

CSSコード-問題はここにある可能性があります:

       body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

ul{
    margin:0;
    padding:0;
}

li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

    .subtext{
        padding-top:15px;
    }

/*Menu Color Classes*/
.green{background:#6AA63B url('http://buildinternet.com/live/smoothmenu/images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('http://buildinternet.com/live/smoothmenu/images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('http://buildinternet.com/live/smoothmenu/images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('http://buildinternet.com/live/smoothmenu/images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('http://buildinternet.com/live/smoothmenu/images/blue-item-bg.jpg') top left no-repeat;}
4

1 に答える 1

1

Kuroが言ったように、同じID(IDは一意の値です)を削除する必要が

ありますが、別のエラーは「});」がありません 入力終わり。

コードのこの部分は、CSS (border:0; など) を追加して削除できるものです。

$("a").click(function(){
    $(this).blur();
});

あなたは Hosting24 を使用しており、すべてのページでスクリプトを作成しています...
削除するには、この質問を見てください。
これがお役に立てば幸いです。

于 2012-09-09T14:43:44.123 に答える