0

シンプルな 2 レベルのナビゲーション メニューを備えたサイトで作業しています。以下のリンクを参照してください。

http://tinyurl.com/d3wjtrc

私がする必要があるのは、サブメニューが表示されたときに素敵な jQuery 効果を持たせることです。フェードインやその他のクールな効果のようなもの。

サブメニューを表示するために純粋なcssコードを使用しています。以下のコード。

.menu{
    list-style:none; list-style-type:none;
    margin:25px 0 0 0;
}

.menu li{
    height:58px;
    background-repeat:no-repeat;
    position:relative;
}

.menu li a, .menu li a:visited {
    display:block;
    text-decoration:none;
    text-indent:-9999px;
    height:50px;
    background-repeat: no-repeat;
}

.menu li ul{
    display:none;
    height:157px;
    list-style:none; list-style-type:none;
    border-bottom:1px solid #777;
}

.menu li ul li{
    height:157px; float:left;
}

.menu li ul li img:hover{
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
}

.menu li ul li a, .menu li ul li a:visited{
    text-indent:0;
}

.menu li.menu_jack:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-132px;
}

.menu li.menu_family:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-270px;
}

.menu li.menu_cocktails:hover ul{
    width:697px;
    padding:0 0 0 327px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-420px;
}

.menu li.menu_partner:hover ul{
    width:924px;
    padding:0 0 0 100px;
    height:175px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-508px;
}

.menu li.menu_competitions:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-659px;
}

.menu li.menu_games:hover ul{
    width:1024px;
    height:157px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-770px;
}

.menu li.menu_photos:hover ul{
    width:1024px;
    height:137px;
    display:block;
    background:#000;
    position:absolute; top:58px; left:-836px;
}

あなたの助けに感謝します。ありがとう

4

1 に答える 1

0

jQuery にタグを付けたので、CSS 以外のソリューションを求めていると思いますか? その場合は、以下のようなものを使用してフェードイン効果を実現できます。

$('#menuItem').hover(function(){
   $('.itemToFade').fadeIn();
},
function{
   $('.itemToFade').fadeOut();
});
于 2013-03-23T13:30:53.497 に答える