Отзывчивая прокручиваемая вкладка в CSS

Question

Я ищу для реализации навигационной панели, как показано ниже. там две версии, первый - полный экран, а второй - мобильный. Мобильный телефон прокручивается влево и вправо в течение дней недели. Что это значит, так что я могу найти примеры или лучше снова, кто-нибудь знает, как я буду реализовывать это.

Я только показал панель навигации ниже, но я предполагаю, что это на самом деле больше вкладок контроля, как это будет только отображать различные дивы в зависимости от какого дня недели щелкнул

спасибо

Answer 1

Обновлено включать как Bootstrap Navbar и реализацию jQueryUI вкладок (за комментарий)

Там собирается быть некоторые работы лет вам нужно достичь того же стиля, который вы изображаете выше, но приведенный ниже пример достигнет желаемой функциональности. Пример теперь показывает базовую реализацию Bootstrap и jQuery. (http://getbootstrap.com/components/#nav-tabs). В jQueryUI есть вкладки (http://jqueryui.com/tabs/). Из коробки оба фреймворка перемещают вкладки слева и завертываются в новую строку, поэтому вы можете просто переопределить значения (например, ниже). Это идентичные решения с разными селекторами.

Вот звенеть (http://plnkr.co/edit/nh4GsiSsbE6UQ0xVzF0G?p=preview)

Запустите образец и изменить размер области результатов, чтобы увидеть эффект

Bootstrap 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 для Bootstrap. jQueryUI будет похож, просто разные селекторы.

Чтобы настроить полосу прокрутки, вам нужно будет немного поработать над пользовательскими полосами прокрутки. Вот хорошая дискуссия о том, как это сделать с помощью WebKit: http://css-tricks.com/custom-scrollbars-in-webkit/ Скорее всего, вы захотите найти хорошее кросс-браузерное решение для этого.