1

Stack Overflow に参加できてうれしいです :)

最近、WordPress メニューに Jquery フェードイン/フェードアウト コードをいくつか実装しました。このリソースでここにあるコードを実際に使用しました。どうやら、かなり一般的に使用されている Jquery コードの一部のようです。

WordPressのメニューに組み込むことができました。すべてがプライマリ ナビゲーションでうまく機能します。ただし、サブメニューは、プライマリナビゲーションと同じ高さと Jquery 効果を採用していますが、これは望ましくありません。サブメニューを薄くして、背景色をシンプルに変更したいです。

私の質問は、この優れた jquery スクリプトを使用しながら、プライマリ ナビゲーションとサブ ナビゲーションのスタイルを互いに独立させる方法です。関連するcssコードを貼り付けましたが、誰かが洞察を提供できることを望んでいました. これは標準のワードプレス メニュー CSS に基づいており、一目瞭然であることを願っています。

#access {
    margin:0; 
    padding:0;
    list-style:none;
    line-height:60px;
}
#access ul {
    font-size: 16px;
    font-family: 'swis721_ltcn_btlight';
    text-transform:uppercase;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    display:inline-block;
    text-align: center;
}
#access li {
    float:left; 
    background:url(images/default.jpg) no-repeat center center; /
    width:150px;    
    height: 50px;                       
    position:relative;          
}
#access li a {
    z-index:20;     
    display:block;
    position:relative;
    color:#777;
    border-right: 1px dotted #cccccc;
}

#access li .hover {
    background:url(images/over.jpg) no-repeat center center;
    position:absolute;  
    width:150px;    
    height:50px;
    left:0;
    top:0;  
    z-index:0;      
    display:none;       
}

#access ul ul {
    height: 17px !important;
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 50px;
    left: 0;
    width: 150px;
    z-index: 99999;
}

#access ul ul a {
    background:#ccc;
    border-top: 1px dotted #ffffff;
    border-bottom: 1px dotted #ffffff;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.1em;
    text-align: left;
    padding: 5px 10px;
    width: 130px;
    height: 17px;
}

#access ul ul :hover > a {
    height:17px !important;
}

基本的に、「#access ul ul a」または「#access ul ul :hover > a」でサブメニュー スタイルを変更しようとすると、プライマリ ナビゲーションの高さとホバー効果が引き継がれます。

問題の例へのリンクを含めました。「イベントとサービス」にカーソルを合わせると、サブメニューの問題が表示されます。

http://streetsmartetiquette.com/wordpress/about/

以下にも追加されたJqueryコード：

jQuery(document).ready(function($) {

    //Append a div with hover class to all the LI
    $('#menu-navmenu li').append('<div class="hover"><\/div>');


    $('#menu-navmenu li').hover(

        //Mouseover, fadeIn the hidden hover class  
        function() {

            $(this).children('div').stop(true, true).fadeIn('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $(this).children('div').stop(true, true).fadeOut('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');

    });

});

助けてくれてありがとう！

4

2 に答える 2

0

こんにちは、あなたの問題は CSS にあると思います。メニューから最初の ul li を、サブメニューから ul li を分離していません。

で新しいcssを作成します

#access .sub-menu li {  
    height: 18px; // the height you need for the submenu or anything else you ant to change                                
}

と

#access .sub-menu li .hover {
height: 18px;// the height you need for the hover effect from the jquery                                
}
于 2013-04-26T22:15:37.483 に答える