0

私は自分のワードプレスサイトでこのメニューを使おうとしています。

ホバー/選択したナビゲーションアイテムごとにフロートラインの色を変更するにはどうすればよいのでしょうかbackground-color:#800; height:2px;。現時点ではすべて赤（）です。

これが私が達成しようとしていることです。
メニュー1-ホバリングフロートラインは緑、
メニュー2-フロートラインは黄色、
メニュー3-赤、menu4-青などです。

どんな助けでも大歓迎です。

ありがとうございました。

4

2 に答える 2

0

これを実現するためのより「CSS」の方法がありますが、いくつかのjavascriptを使用すると、非常に読みやすいものを取得できます。このアプローチでは、ページはフロートライン（.hightlight）とナビゲーションボーダー（#sses1 > ul）を正しく初期化する必要があります。

理想的な解決策は、各フロート行のクラスですが、JavaScriptのみで取得したものは次のとおりです。

<!-- added individual classes for nav items -->
<div id="sse1">
  <div id="sses1">
    <ul>
      <li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
      <li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
      <li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
    </ul>
  </div>
</div>

ボディまたはウィンドウがロードされる前：

    function customHandleMenu() {
        // get nav selector
        var nav = $('#sses1 > ul');

        // get float line selector
        var floatLine = $('.highlight'); // .hightlight must exist at this point

        // get colors for the current page
        var defaultBGcolor = floatLine.css('background-color');
        var defaultBorderColor = floatLine.css('border-color');
        var defaultNavBorderColor = nav.css('border-bottom-color');


        // change background-color and border-color on mouseenter event

        $('.nav-item-1').on({
            mouseenter: function () {
                setColors({floatColor:'#0f0', borderColor:'#0f0'});
            }
        });

        $('.nav-item-2').on({
            mouseenter: function () {
                setColors({floatColor:'#ee0', borderColor:'#ee0'});
            }
        });

        $('.nav-item-3').on({
            mouseenter: function () {
                setColors({floatColor:'#05f', borderColor:'#05f'});
            }
        });


        /*
           ...
        */

        // put back default colors on the mouseleave event
        $('#sses1 > ul > li').on({
            mouseleave: function() {
              setColors({floatColor:defaultBGcolor, borderColor:defaultNavBorderColor});
            }
        });

        function setColors(args) {
            if (typeof args.floatColor != "undefined") {
                floatLine.css('background-color', args.floatColor);
            }

            if (typeof args.borderColor != "undefined") {
                floatLine.css('border-color', args.borderColor);
                nav.css('border-bottom-color', args.borderColor);
            }
        }
    }

セレクターが.highlightが存在する場合にのみ使用されるようにするには、元のJavaScriptの末尾を次のように変更することをお勧めします。

function initMenu() {
    sse1.builMenu();
    customHandleMenu();
}

if (window.addEventListener) {
    window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", initMenu);
}
else {
    window["onload"] = initMenu;
}

このjsfiddleを見てください。

PS：イベントチェーンはjsfiddleに合うようにわずかに変更されています。

于 2013-01-12T02:16:13.493 に答える
0

あなたが求めているのは、実際には自明ではありません。プラグインの作成者は、実際には、マウスをホバーした場所に基づいて、li要素の「li.highlight」、幅、および左の位置をアニメーション化しています。このアイテムのCSS定義を変更することで、このものの色を簡単に変更できます。たとえば、黄色にするには、メニューのcssファイルの下に次のcss定義を含めるだけです。

#sses1 li.highlight {
    background-color: yellow;
    top: 36px;
    height: 2px;
    border-bottom: solid 1px yellow;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

これが完全な解決策ではないことはわかっています...しかし、野心的な場合は、.highlight要素の下にあるli要素に応じて、javascriptを変更して新しいクラスを追加できます。

于 2013-01-12T02:42:45.990 に答える