Question

我正在使用简单的2级导航菜单工作。请参阅以下链接。

我需要做的是在显示子菜单时有一些不错的jQuery效果。像Fade In或任何其他很酷的效果。

我正在使用纯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;
}

非常感谢您的帮助。感谢

Answer 1

当你标记jQuery时，我猜你是在使用非CSS解决方案吗？如果是这样，那么您可以使用类似下面的内容来实现淡入效果。

$('#menuItem').hover(function(){
   $('.itemToFade').fadeIn();
},
function{
   $('.itemToFade').fadeOut();
});

将jQuery效果应用于纯2级CSS菜单

1 个答案: