CSS의 스크롤 가능한 스크롤 가능한 탭 내비게이션

Question

다음과 같이 탐색 모음을 구현하려고합니다. 두 가지 버전이 있으며, 첫 번째 버전은 전체 화면이며 두 번째 버전은 모바일입니다. 요일 동안 모바일이 왼쪽 및 오른쪽으로 스크롤하고 있습니다. 이것이 무엇인지 불리는 이유는 내가 예제를 찾거나 더 잘 볼 수 있기 때문에 아무도 내가 이것을 구현하는 방법을 알 수 없다.

난 단지 아래의 탐색 모음을 보여 주었다 그러나 나는 요일이

을 클릭에 따라 다른 div가 그냥 표시됩니다으로 탭 컨트롤의 사실보다 추측은 당신에게

감사합니다

Answer 1

는 몇 가지 작업을 요있을거야

부트 스트랩 네비게이션 바 및 (코멘트 당) jQueryUI 탭 구현을 모두 포함하는 업데이트 위와 똑같은 스타일을 만들어야하지만, 아래 예는 원하는 기능을 얻을 수 있습니다. 이제 예제는 기본 부트 스트랩 및 jQuery 구현을 보여줍니다.

부트 스트랩에 이미 내비게이션 탭이 있습니다 (http://getbootstrap.com/components/#nav-tabs). jQueryUI에는 탭 (http://jqueryui.com/tabs/)도 있습니다. 기본적으로 두 프레임 워크는 탭을 왼쪽으로 이동하고 새 행으로 줄 바꿈하므로 값 (아래 참조)을 재정의 할 수 있습니다. 다른 셀렉터와 동일한 솔루션입니다. 여기

가 쿵하는 소리 ( http://plnkr.co/edit/nh4GsiSsbE6UQ0xVzF0G?p=preview)

부트 스트랩 CSS을 샘플을 실행하고 효과를 볼 수있는 결과 창 크기를 조정의

.nav-tabs { 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
.nav-tabs > li { 
    float: none; 
    display: inline-block; 
} 

jQueryUI CSS

.ui-tabs-nav { 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 
.ui-tabs .ui-tabs-nav li { 
    float: none; 
    display: inline-block; 
} 

원하는 스타일을 얻으려면 부트 스트랩을 위해 .nav-tab > li 및 아마도 .nav-tab > li.active과 같은 nav 요소를 사용자 정의해야합니다. jQueryUI는 다른 선택자와 비슷합니다.

스크롤바를 사용자 정의하려면 사용자 정의 스크롤바에 대해 조금 더 연구해야합니다. WebKit을 사용하여 수행하는 방법에 대한 좋은 토론은 여기에 있습니다. http://css-tricks.com/custom-scrollbars-in-webkit/ 당신은 가장 좋은 크로스 브라우저 솔루션을 찾고 싶을 것입니다.