선택한 요소로 롤러 효과 구현

Question

나는 최선을 다해 설명하려고 노력할 것입니다. 이 튜토리얼 http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/을 사용하여 내 웹 사이트의 가로 탐색 메뉴를 활용했습니다. 현재 튜토리얼에서 자바 스크립트를 조정하려고합니다. 각 링크를 마우스로 움직일 때 각 링크에서 마우스 롤오버를 유지하고 싶지만 선택한 링크를 항상 강조 표시하고 싶습니다 (현재는 기능이 없습니다).

나는 현재 포트홀리로 링크에 있고 강조 표시되어 있으며 마지막으로 홈 버튼을 마우스로 이동하기 전에 (내 메뉴 div에서 마우스를 이동하기 전에) 내 홈 링크를 강조 표시하지만 현재 내 포트폴리오 페이지에 있습니다. 바라건대, 나는 충분히 명확하게

body{ 
background:#292929; 
overflow: hidden; 
font-family: Arial, Helvetica, sans-serif; 
} 
.slidingMenu { 
position: absolute; 
top:250px; 
left: 0px; 
padding-bottom: 10px; 
width: 400px; 
} 
.slidingMenu li { 
display:block; 
float:left; 
clear:both; 
padding-left: 12px; 
height: 52px; 
line-height: 52px; 
} 

.slidingMenu li.selected{ 
display:block; 
float:left; 
clear:both; 
padding-left: 12px; 
height: 52px; 
line-height: 52px; 
} 
.slidingMenu li.move { 
width: 9px; 
position: absolute; 
z-index: 8;  
background: #df0101;  
background: 
    -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     from(#a70404), 
     to(#df0101) 
    );  
background: 
    -moz-linear-gradient(
     top, 
     #a70404, 
     #df0101 
    );  
-moz-border-radius: 0px 8px 8px 0px; 
-webkit-border-top-right-radius: 8px;  
-webkit-border-bottom-right-radius: 8px; 
border-top-right-radius: 8px; 
border-bottom-right-radius: 8px;   
-moz-box-shadow:1px 1px 5px #000; 
-webkit-box-shadow:1px 1px 5px #000; 
box-shadow:1px 1px 5px #000;  
} 
.slidingMenu li a { 
font-size:50px; 
text-transform:uppercase; 
text-decoration: none; 
color: #FFF; 
text-indent:5px; 
z-index: 10; 
display: block; 
z-index: 10; 
float: right; 
line-height: 50px; 
position: relative; 
padding-right:10px; 
} 

/* Descriptions */ 
.slidingMenuDesc{ 
margin-top:40px; 
position:relative; 
} 
.slidingMenuDesc div{ 
background: #df0101;  
background: 
    -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     from(#a70404), 
     to(#df0101) 
    );  
background: 
    -moz-linear-gradient(
     top, 
     #a70404, 
     #df0101 
    );  
height: 52px; 
right:-5px; 
width:0px; 
overflow:hidden; 
position:absolute; 
-moz-box-shadow:1px 1px 5px #000; 
-webkit-box-shadow:1px 1px 5px #000; 
box-shadow:1px 1px 5px #000; 
-moz-border-radius: 8px 0px 0px 8px; 
-webkit-border-top-left-radius: 8px;   
-webkit-border-bottom-left-radius: 8px; 
border-top-left-radius: 8px; 
border-bottom-left-radius: 8px; 
} 
.slidingMenuDesc div span { 
font-size:24px; 
color: #f0f0f0; 
display: block; 
z-index: 10; 
line-height: 52px; 
position:absolute; 
margin-left: 30px; 
} 

을 설명했다 다음은 메뉴 내 CSS를

$(document).ready(function(){ 
      var $menu = $("#slidingMenu"); 

      /** 
      * the first item in the menu, 
      * which is selected by default 
      */ 
      var $selected = $menu.find('li:first'); 

      /** 
      * this is the absolute element, 
      * that is going to move across the menu items 
      * it has the width of the selected item 
      * and the top is the distance from the item to the top 
      */ 
      var $moving = $('<li />', { 
       'class' : 'move', 
       'top' : $selected[0].offsetTop + 'px', 
       'width' : $selected[0].offsetWidth + 'px' 
       }); 

      /** 
      * each sliding div (descriptions) will have the same top 
      * as the corresponding item in the menu 
      */ 
      $('#slidingMenuDesc > div').each(function(i){ 
       var $this = $(this); 
       $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px'); 
      }); 

      /** 
      * append the absolute div to the menu; 
      * when we mouse out from the menu 
      * the absolute div moves to the top (like innitially); 
      * when hovering the items of the menu, we move it to its position 
      */ 
      $menu.bind('mouseleave',function(){ 
        //moveTo($selected,400); 
        }) 
       .append($moving) 
       .find('li') 
       .not('.move') 
       .bind('mouseenter',function(){ 
        var $this = $(this); 
        var offsetLeft = $this.offset().left + $(window).width() - ($this.outerWidth() + 20); 
        //slide in the description 
        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo'); 
        //move the absolute div to this item 
        moveTo($this,400); 
        }) 
        .bind('mouseleave',function(){ 
        var $this = $(this); 
        var offsetLeft = $this.offset().left - 20; 
        //slide out the description 
        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo'); 
        }); 

      /** 
      * moves the absolute div, 
      * with a certain speed, 
      * to the position of $elem 
      */ 
      function moveTo($elem,speed){ 
       $moving.stop(true).animate({ 
        top  : $elem[0].offsetTop + 'px', 
        width : $elem[0].offsetWidth + 'px' 
       }, speed, 'easeOutExpo'); 
      } 
     }); 

입니다 :

여기 내 코드입니다. 내 자바 스크립트 기술은 매우 약하다 - 이것은 웹 사이트를 만드는 첫 번째 시도 중 하나이기 때문에 나는이 코딩 형식을 사용하기 시작했다. 사전에 도움을 주셔서 감사합니다.

Answer 1

jsfiddle 만들 수 있습니까? 나는 id, 클래스, 등등을 위해 html 부분을 aprreciate 할 것입니다. 그런 다음 제대로 대답하기 위해 제 질문을 편집 할 것입니다.

그리고 정말로 당신의 질문을 이해하지 못했습니다. 마우스를 가져 가면 마우스를 움직이더라도 링크가 스타일을 유지하기를 원하지만 링크를 마우스로 가리 키기 전에 마우스를 올려 놓기 만하면 스타일이 적용되기를 원할 것입니다. 그리고 여전히 마우스가 링크 위에 있다면, 그것을 얻을 수 있습니까?

는

--update : 여기

는 repective 의견입니다 :

jsfiddle.net/VYuS6/2

난 단지 문제는 필요한 API에 대한 참조의 부족 개봉 된 생각 등.

추신. : 모든 브라우저에서 내 PC에서 완벽하게 작동했습니다. PS.2 : Jsfiddle이 내 CSS 참조를 허용하지 않았지만 jsfiddle 외부에서 작동합니다.