0

ドロップライン スタイルのメニューを作成しようとしています。

ここで私のフィドルを参照してください - http://jsfiddle.net/oampz/38c6q/

私が抱えている問題は、茶色のメニューが欲しくない、またはドロップダウン/フェードインしたくないということです。サブメニュー項目を単に灰色のサブ DIV に表示しようとしています。

$('#main-nav > li').hover(function(){
            if(!$(this).find('.main-link').hasClass('active')){
                $("#main-nav > li a.active").removeClass("active");
                $(this).find('.main-link').addClass("active");
                if($(this).find('li').length){
                    //$("#main-nav li a.close").stop().fadeIn();
                    //There is no .close
                    var that = this;
                    $("#sub-link-bar").stop().animate({ height: "40px"}, function(){
                        $(that).find(".sub-links").show();
                    });
                }
                else {
                     $(this).find(".sub-links").stop().fadeOut( function(){
                        $(this).css('opacity','1');
                        $("#sub-link-bar").stop().animate({height: "1px"});
                     });
                }
            }
        }, function(){
            if($(this).find('li').length){
                $(this).find(".sub-links").stop().hide( function(){
                    $(this).css('opacity','1');

                });
            }
            $("#sub-link-bar").stop().animate({height: "1px"});
           $(this).find('.main-link').removeClass('active');
        });

どんな助けでも感謝します。

4

1 に答える 1

1

コードを更新しましたhttp://jsfiddle.net/38c6q/1/

これを交換した

$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
    $(that).find(".sub-links").show();
});

と

 $('#sub-menu').html(  $(that).find(".sub-links").html() )

それらを隣り合わせに浮かせるには、このCSSを追加できます

.sub-menu li{
    display:block;
    padding:0;
    margin:0;
    float:left;
}

リンクに色と背景を追加するには、次のような CSS を追加します。

.sub-menu a{
    display:block;
    margin:0 5px;
    padding:5px;
    text-decoration:none;
    Color:#333;
}

.sub-menu a:hover{
    background:#333;
    color:#fff;
}

http://jsfiddle.net/38c6q/4/で更新されたデモ

于 2013-08-08T12:45:13.967 に答える