web-dev-qa-db-fra.com

Menu basé sur des onglets horizontaux avec des onglets de défilement

J'ai un menu horizontal simple plus comme des onglets .. Je veux qu'il fonctionne comme un menu à onglet d'application BBC, de sorte que lorsque le menu aura plus d'éléments, il permettra un défilement horizontal dans les deux sens.

Le même que mon code est ici http://codepen.io/anon/pen/GZRaee

enter image description here

Je l'ai essayé peu de choses mais rien ne semble fonctionner Comme si j'avais enveloppé le menu dans div avec une largeur fixe et essayé de le faire défiler mais cela n'a pas fonctionné car il ajoute toujours une barre de défilement. J'ai essayé d'en faire un carrousel qui ne fonctionnait pas non plus pour moi.

Existe-t-il une prise similaire pour un site Web basé sur HTML? La barre de navigation utilisée par l'application BBC est assez courante dans l'application, j'aimerais pouvoir avoir quelque chose de similaire pour la page Web HTML pour la version mobile.

<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>
javascriptjqueryhtmlcsscss3
25
Learning

Vous pouvez le faire avec Owl Carousel 2 . Comme vous pouvez le voir, vous pouvez faire défiler les onglets horizontalement avec la souris et il n'y a pas de barre de défilement horizontale. J'ai également utilisé l'option responsive pour ajuster le nombre d'onglets d'affichage sur différentes largeurs, mais vous pouvez le modifier. Voici n violon et n autre Fiddle avec des flèches.

//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>
18
Nenad Vracar

J'ai changé votre codepen avec le code suivant qui masque essentiellement la barre de défilement en forçant la hauteur de l'encapsuleur et en masquant son débordement.

.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 cela ne vous dérange pas de forcer la hauteur du menu, cela devrait le faire.

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

Edit: Gardez à l'esprit que pour pouvoir faire défiler ce menu, vous avez besoin d'un appareil capable de faire défiler horizontalement (un tel appareil tactile ou un trackpad)

8
Dax

Pour faire défiler le contenu d'un élément, nous devons d'abord ajouter overflow: scroll ou overflow: auto à l'élément. (Voir la différence ici .)

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

Ensuite, nous devons laisser le contenu prendre autant d'espace qu'il le souhaite. Retirer width: 100% pour permettre cela. Ajoutez également white-space: nowrap pour empêcher le contenu de se diviser en plusieurs lignes.

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

Enfin, si vous ne souhaitez pas que la barre de défilement s'affiche (sur le .tab-nav-wrapperelement), vous pouvez le masquer comme ceci.

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

Enfin, déplacez l'arrière-plan de tab-nav-wrapper > ul à tab-nav-wrapper. C'est parce que le ul ne sous-tend pas tout son contenu, mais le wrapper le fait.

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

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

[~ # ~] nb [~ # ~] : il y a un problème avec le défilement dans cet exemple de codepen. Le défilement de la molette de la souris ne fonctionne pas, mais vous pouvez le faire défiler en le faisant glisser si vous le visualisez sur un appareil, ou en mode développement + mode appareil dans votre navigateur.

3
ArneHugo

Une solution simple:

donner la .tab-nav-wrapper une hauteur fixe qui devrait être la hauteur des éléments li (éléments de navigation) et masquer les éléments qui débordent (ici nous voulons masquer la barre de défilement):

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

Ensuite, faites défiler ul (uniquement la direction x) et empêchez les éléments li de se casser sur une nouvelle ligne:

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

C'est tout :). Aucun javascript requis pour le faire fonctionner: http://codepen.io/anon/pen/RarPxp

3
sjkm