Меню с горизонтальной вкладкой с прокручиваемыми вкладками

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

То же самое с моим кодом здесь http://codepen.io/anon/pen/GZRaee

Я попробовал немного, но ничего не работает. Как я обернул меню в div с фиксированной шириной и попытался сделать его прокруткой, но это не сработало, поскольку оно всегда добавляет строку прокрутки. Я попытался сделать это карусели, которая тоже не работала для меня.

Есть ли подобный штекер для веб-сайта на основе HTML. Панель Nav, используемая приложением BBC, довольно распространена в приложении, я хочу, чтобы у меня было что-то похожее для HTML-страницы для мобильной версии.

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">MenuONE</a></li>
    <li class="two"><a href="#">MTWO</a></li>
    <li class="three"><a href="#">THREE</a></li>
    <li class="four"><a href="#">FOUR</a></li>
    <li class="five"><a href="#">MenuFIVE</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c">
    <p>This is ONE.</p>
  </div>
  <div class="tab2-c">
    <p>This is TWO</p>
  </div>
  <div class="tab3-c">
    <p>This is THREE</p>
  </div>
  <div class="tab4-c">
    <p>This is FOUR</p>
  </div>

  <div>

Ответ 1

Вы можете сделать это с Owl Carousel 2. Как вы можете видеть, вы можете горизонтально прокручивать вкладки с помощью перетаскивания мышью, а горизонтальная полоса прокрутки отсутствует. Также я использовал опцию responsive чтобы настроить количество отображаемых вкладок различной ширины, но вы можете изменить это. Вот скрипка и еще одна скрипка со стрелками.

//OWL Carousel
$('.tabs').owlCarousel({
    loop: true,
    nav: false,
    dots: false,
    responsive: {
      0:   {items: 2},
      250: {items: 3},
      400: {items: 4},
      500: {items: 5}
    }
});

//Tabs
$('.tabs li a').click(function() {
  var activeLink = $(this).data('target');
  var targetTab = $('.tab.'+activeLink);
  
  targetTab.siblings().removeClass('active');
  targetTab.addClass('active');
});

body {
  background: white;
}

a {
  color: white;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}

ul {
  list-style-type: none;
  max-width: 500px;
  margin: 2px auto;
  background: #353434;
  padding: 0;
}

.tab-content {
  max-width: 500px;
  border: 1px solid black;
  margin: 0 auto;
}

.owl-controls {
  display: none;
}

li {
  display: inline-block;
  padding: 10px 20px;
  white-space: nowrap;
  transition: all 0.3s ease-in;
  border-bottom: 4px solid transparent;
}

li:hover {
  border-bottom: 4px solid white;
  opacity: 0.7;
  cursor: pointer;
}

.tab-content > div {
  display: none;
}

.tab-content > div.active {
  display: block;
}

.info {
  text-align: center;

<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

<p class="info">Grab and drag tabs for scroll</p>

<ul class="tabs">
  <li class="item"><a data-target="tab-one">Tab One</a></li>
  <li class="item"><a data-target="tab-two">Tab Two</a></li>
  <li class="item"><a data-target="tab-three">Tab Three</a></li>
  <li class="item"><a data-target="tab-four">Tab Four</a></li>
  <li class="item"><a data-target="tab-five">Tab Five</a></li>
  <li class="item"><a data-target="tab-six">Tab Six</a></li>
  <li class="item"><a data-target="tab-seven">Tab Seven</a></li>
  <li class="item"><a data-target="tab-eight">Tab Eight</a></li>
</ul>

<div class="tab-content">
  <div class="tab tab-one active">One <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, iusto!</div>
  <div class="tab tab-two">Two <br> Lorem ipsum dolor sit amet, consectetur</div>
  <div class="tab tab-three">Three</div>
  <div class="tab tab-four">Four</div>
  <div class="tab tab-five">Five</div>
  <div class="tab tab-six">Six</div>
  <div class="tab tab-seven">Seven</div>
  <div class="tab tab-eight">Eight</div>
</div>

Ответ 2

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

.tab-nav-wrapper{
  /* forced the wrapper height and set overflow to hidden to hide the ul scrollbar */
  height: 47px;
  overflow: hidden;
}

.tab-nav-wrapper > ul{
  /* padding: 0 !important; */
  overflow-x: auto;
  white-space: nowrap;
  /* this padding will place the scrollbar inside the hidden overflow */
  padding: 0 0 20px;
}

Если вы не против форсировать высоту меню, это следует сделать.

http://codepen.io/anon/pen/wGaKrB

Изменение: имейте в виду, что для того, чтобы прокрутить это меню, вам нужно устройство, способное прокручивать по горизонтали (такое как сенсорное устройство или трекпад)

Ответ 3

Чтобы сделать контент в элементе прокручиваемым, сначала нам нужно добавить overflow: scroll или overflow: auto к элементу. (См. Разницу здесь.)

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll; /* add */
}

Затем нам нужно, чтобы содержимое занимало столько места, сколько захочет. Удалите width: 100%, чтобы это разрешить. Кроме того, добавьте white-space: nowrap, чтобы содержимое не разбивалось на несколько строк.

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  /* width: 100%; */ /* remove */
  white-space: nowrap; /* add */
  display: inline-block;
  z-index: 100;
  background-color: #ccc;
}

Наконец, если вы не хотите, чтобы полоса прокрутки отображалась (в элементе .tab-nav-wrapper), вы можете скрыть ее следующим образом.

.tab-nav-wrapper::-webkit-scrollbar { 
  display: none; 
}

Наконец, переместите фон с tab-nav-wrapper > ul на tab-nav-wrapper. Это связано с тем, что ul не лежит в основе всего содержимого, но обертка делает.

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  z-index: 100;
  /* background-color: #ccc; */ /* move */
}

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll;
  background-color: #ccc; /* move to here */
}

Fiddle: http://codepen.io/anon/pen/VaeLje

Примечание. Существует проблема с прокруткой в этом примере кода. Прокрутка колесика мыши не работает, но вы можете прокручивать, перетаскивая ее, если вы просматриваете ее на устройстве или в режиме разработки + режим устройства в вашем браузере.

Ответ 4

Простое решение:

укажите .tab-nav-wrapper фиксированную высоту, которая должна быть высотой элементов li (элементы навигации) и скрыть элементы, которые переполняются (здесь мы хотим скрыть полосу прокрутки):

.tab-nav-wrapper {
  overflow: hidden; // magic is here
  height: 48px; // magic is here
}

Затем сделайте прокручиваемое ul (только направление x) и не доведя элементы li до новой строки:

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  z-index: 100;
  background-color: #ccc;
  white-space: nowrap; // magic is here
  overflow-x: scroll; // magic is here
}

Это все:). Для его работы не требуется javascript: http://codepen.io/anon/pen/RarPxp