선택한 메뉴 항목에 대한 부유 선 색

Question

내 WordPress 사이트에 플로트 선 메뉴를 사용하고 있는데, 어떤 도움을 받아 THIS FAR이 있습니다.

이제 제 질문은 선택한 nav float 행을 메뉴 항목 위로 마우스를 가져갈 때와 같은 색으로 만들 수 있습니까? 이 순간 마우스가 꺼지 자마자 기본 빨간색으로 바뀝니다.

이

내가 달성하기 위해 노력하고있어입니다 :

메뉴 1 (클릭 후) seleceted 때, 플로트 라인 색상 선택 #0f0

메뉴이 있어야한다 - #ee0

Menu3 선택된 - #05f

도움을 주시면 감사하겠습니다.

Answer 1

var sse1 = function() { 상기 var currentSelected; 추가 및 currentSelected 현재 선택된 목록의 인덱스를 밀어 버린다

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=k; 추가. |

그래서 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); 
     } 
    } 
} 

Live demo을에서 사용 Demo source

그냥

//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 함수의 경우 페이지로드가 준비되는 동안 원하지 않는 애니메이션을 완전히 비활성화하십시오.

Live demo | Demo source