javascript - tab - Menú basado en pestañas horizontales con pestañas de desplazamiento

tabs html css

Question

Tengo un menú horizontal más parecido a las pestañas ... Quiero que funcione como un menú de pestañas de la aplicación de la BBC, de modo que cuando el menú tenga más elementos permitirá el desplazamiento horizontal en ambas direcciones.

El mismo de mi código está aquí http://codepen.io/anon/pen/GZRaee

Probé pocas cosas, pero nada parece funcionar como si envolviera el menú en div con ancho fijo y traté de hacerlo con capacidad de desplazamiento, pero eso no funcionó ya que siempre agrega la barra de desplazamiento. Intenté hacer un carrusel que tampoco funcionó para mí.

¿Hay algún complemento similar para el sitio web basado en HTML. La barra de navegación utilizada por la aplicación BBC es bastante común en la aplicación, me gustaría poder tener algo similar para una página web basada en HTML para la versión móvil.

<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>

Answer 1

Cambié tu codepen con el siguiente código que básicamente oculta la barra de desplazamiento forzando la altura de la envoltura y ocultando su desbordamiento.

.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;
}

Si no te importa forzar la altura del menú, esto debería hacerlo.

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

Answer 2

Para hacer que el contenido de un elemento sea desplazable, primero debemos agregar overflow: scroll o overflow: auto al elemento. (Vea la diferencia here ).

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

Entonces debemos dejar que el contenido ocupe todo el espacio que desee. Eliminar width: 100% para permitir eso. Además, agregue white-space: nowrap para evitar que los contenidos se dividan en varias líneas.

.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;
}

Finalmente, si no desea que se muestre la barra de desplazamiento (en el elemento .tab-nav-wrapper ), puede ocultarlo de esta manera.

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

Por último, mueva el fondo de tab-nav-wrapper > ul a tab-nav-wrapper . Esto se debe a que la ul no subyace a todos sus contenidos, pero la envoltura sí lo hace.

.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

NB : hay un problema con el desplazamiento en este ejemplo de código. El desplazamiento de la rueda del ratón no funciona, pero puede desplazarse arrastrando si lo está viendo en un dispositivo, o en el modo de desarrollo + modo de dispositivo en su navegador.

Answer 3

Puedes hacer esto con Owl Carousel 2 . Como puede ver, puede desplazar las pestañas horizontalmente con el mouse y no hay barra de desplazamiento horizontal. También utilicé la opción de responsive para ajustar el número de pestañas mostradas en diferentes anchos, pero puedes modificarlo. Aquí hay un violín y otro violín con flechas.

//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>

Answer 4

Una solución simple:

dé a .tab-nav-wrapper una altura fija que debería ser la altura de los elementos li (elementos de navegación) y oculte los elementos que se desbordan (aquí queremos ocultar la barra de desplazamiento):

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

Luego, haga que la ul desplazable (solo la dirección x) y evite que los elementos li se rompan en una nueva línea:

.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
}

Eso es todo :). No se requiere javascript para que funcione: http://codepen.io/anon/pen/RarPxp