응답 Superfish 네비게이션 바

Question

나는이 예에서와 같이, Superfish 메뉴 바 구현 탐색 한 : 만이 jsfiddle 같이 첫 번째 수준을 필요로 한 http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/

: 이제 http://jsfiddle.net/v1c09us9/

문제가 된 경우 그 하위 메뉴에 10 개의 항목이있는 경우 메뉴 항목이 아래로 이동하기 시작합니다. 메뉴 항목을 한 줄에두고 작은 화살표를 사용하여 오른쪽으로 옮기고 싶습니다. 상위 항목 ul 오버플로를 x 스크롤 가능으로 만들어 메뉴 항목을 가로로 표시하도록했습니다.

.sf-navbar li ul{ 
    white-space: nowrap; 
    width: 100%; 
    overflow-x: scroll; 

} 

.sf-navbar > li > ul > li { 
    display: inline-block; 

} 

jsfiddle이 구현을 보여줍니다. 문제는 이제 내가 숨기고 싶은 스크롤바가 있지만 그것을 할 수있는 방법을 찾을 수 없다는 것입니다. 또한,이 스레드에서 찾은 응답 메뉴를 만드는 데 사용하고있는 해킹을 중단합니다. 세 번째 대답은 How to make superfish dropdown menu responsive?

스크롤 막대를 숨기고 스크롤 할 화살표를 추가 할 수있는 방법이 있는지 알고 싶습니다. 그것들을 반응 적으로 유지한다. 아니면 superfish에 대한 더 나은 대안이 있습니까? 나는 많은 것을 수색했지만 메뉴가 드롭 다운 대신 라인으로 표시되는 동일한 기능을 가진 좋은 대안을 찾을 수 없었다.

고마워요.

Answer 1

좋습니다. 기본적으로 스크롤바를 숨겨서 네비게이션 안에 앉아서 JQuery를 사용하여 네비게이션의 항목을 마우스로 가리키면서 스크롤하고 여전히 반응적입니다. 원하는 방식대로 정확히 이해할 필요가있을 수 있습니다.

JSFiddle

CSS

.sf-navbar > li > ul { 
/* removed min width that was here */ 
overflow:hidden; 
} 

/*altered*/ 
.sf-navbar li ul{ 
    width: 100%; 
    overflow-x: hidden; 

} 

.sf-navbar > li > ul > li { 
    display: inline-block; 
} 

/*added*/ 

.sf-navbar li ul:hover { overflow-x:hidden } 

JS

$.fn.scrollList = function (delay) { 
    delay = delay || 2000; 
    var animateList = function ($list) { 
     //get first child 
     var $first = $list.children('li:first'); 
     var width = $first.outerWidth(true); 
     //animate first two off the screen 
     $first.animate({ 
      'margin-left': $list.width() * -1 
     }, 
     // on animation complete 
     function() { 
      //reset and move to the end of the list 
      $(this).css('margin-left', 0).add($(this).next()).appendTo($list); 
      //start again after delay 
      setTimeout(function() { 
       animateList($list) 
      }, delay); 
     }); 
    }; 

    return this.each(function() { 
     var $that = $(this) 
     setTimeout(function() { 
      animateList($that); 
     }, delay); 
    }); 

}; 

$('.sf-menu ul').scrollList();