3

私は自分のワードプレス サイトでフロート ライン メニューを使用しています。

ここで私の質問は、選択したナビゲーション フロート ラインを、メニュー項目にカーソルを合わせたときと同じ色にするにはどうすればよいかということです。この時点でマウスがオフになるとすぐに、デフォルトの赤に変わります。

これは私が達成しようとしているものです:

メニュー 1 が選択されたとき (クリック後)、フロート線の色は#0f0

メニュー 2 が選択されました -#ee0

Menu3 選択済み -#05f

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

4

1 に答える 1

1

var currentSelected;上var sse1 = function () {に追加し currentSelected=k;、下のブロックに追加

  for (var i = 0; i < a.length; i++) {
            if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
                k = i;
                nLength = a[i].href.length;
            }
        }

現在選択されているリストのインデックスを にプッシュしますcurrentSelected。

したがって、customHandleMenu関数で使用します

var navigations=[
/* Nav 1 style */
{floatColor: '#0f0',
borderColor: '#0f0'},
/* Nav 2 style */
{floatColor: '#ee0',
borderColor: '#ee0'},
/* Nav 3 style */
{floatColor: '#05f',
borderColor: '#05f'},
];

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 = navigations[currentSelected]["borderColor"];
  var defaultBorderColor = navigations[currentSelected]["borderColor"];
  var defaultNavBorderColor = navigations[currentSelected]["borderColor"];
  // change background-color and border-color on mouseenter event

  $('.nav-item-1').on({
    mouseenter: function () {
      setColors({
        floatColor: navigations[0]["floatColor"],
        borderColor: navigations[0]["borderColor"]
      });
    }
  });

  $('.nav-item-2').on({
    mouseenter: function () {
      setColors({
        floatColor: navigations[1]["floatColor"],
        borderColor: navigations[1]["borderColor"]
      });
    }
  });

  $('.nav-item-3').on({
    mouseenter: function () {
      setColors({
        floatColor: navigations[2]["floatColor"],
        borderColor: navigations[2]["borderColor"]
      });
    }
  }); 

    /*
       ...
    */

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

ライブデモ| デモソース

Float Line がオンロードでアニメーション化されないようにするには、コード内にコメントされている指示に従ってください。

//slip.style.left = items[k].offsetLeft + "px";
sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation

作成するには:

slip.style.left = items[k].offsetLeft + "px";
// sse1.move(items[k]); comment out this line and uncomment the line above to disable initial animation.

また、オプションで追加することもできます

$('#sses1 li, #sses1 a').on('click',function(){ 
  $('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseout");
  $('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseleave");
  $('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseenter");
  $('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mousein");
  $('#sses1, #sses1 ul, #sses1 li, #sses1 a').unbind("mouseover");
  sse1={};
});

customhandlemenu関数に対して、ページの読み込み準備中に不要なアニメーションを完全に無効にします。

ライブデモ| デモソース

于 2013-01-12T22:31:30.790 に答える