Horizontale Tab-Menü mit Bildlaufleisten

Question

Ich habe ein einfaches horizontales Menü mehr wie Tabs .. Ich möchte es wie eine BBC App Tab-Menü funktionieren, so dass wenn Menü mehr Elemente erlaubt es horizontalen Scrollen in beiden Richtungen.

Samt meinen Codes ist hier http://codepen.io/anon/pen/GZRaee

Ich versuchte es wenige, was aber nichts zu funktionieren scheint, wie ich das Menü in div mit fester Breite gewickelt und versuchte, damit es machbar bewegen, aber das hat nicht funktioniert, da es immer eine Bildlaufleiste hinzufügt. Ich habe versucht, es Karussell zu machen, das auch nicht für mich funktionierte.

Gibt es einen ähnlichen Stecker für HTML-basierte Website. Die Nav-Leiste, die von der BBC-App verwendet wird, ist in der App recht häufig. Ich wünschte, ich könnte etwas Ähnliches für die HTML-basierte Webseite für die mobile Version haben.

Answer 1

Sie können dies tun, mit Owl Carousel 2. Wie Sie sehen können, können Sie Tabulatoren mit der Maus ziehen und es gibt keine horizontale Bildlaufleiste. Außerdem habe ich die Option responsive verwendet, um die Anzahl der Tabs auf verschiedenen Breiten anzupassen, aber Sie können diese ändern. Hier ist a Fiddle und another Fiddle with arrows.

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

Ich habe Sie mit dem folgenden Code Codepen geändert, die im Grunde die Bildlaufleiste verbirgt durch Erzwingen der Wrapper-Höhe und Verbergen des Überlaufs.

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

Wenn es Ihnen nichts ausmacht, die Menühöhe zu erzwingen, sollte dies dies tun.

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

Answer 3

, um den Inhalt in einem Elemente scrollbaren zu machen, zuerst müssen wir overflow: scroll oder overflow: auto das Element hinzuzufügen. (Sehen Sie den Unterschied here.)

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

Dann müssen wir die Inhalte lassen, so viel Platz in Anspruch nehmen, wie es will. Entfernen Sie width: 100%, um dies zu ermöglichen. Fügen Sie außerdem white-space: nowrap hinzu, um zu verhindern, dass der Inhalt in mehrere Zeilen aufgeteilt wird.

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

Schließlich, wenn Sie (auf dem .tab-nav-wrapper Element) zu zeigen, nicht die Scrollbar möchten, können Sie es so verstecken.

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

schließlich den Hintergrund tab-nav-wrapper > ul-tab-nav-wrapper bewegen. Dies liegt daran, dass die ul nicht alle Inhalte unterlagert, aber der Wrapper tut dies.

.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: Es gibt ein Problem in diesem codepen Beispiel mit Scrollen. Das Scrollen mit dem Mausrad funktioniert nicht, Sie können jedoch durch Ziehen blättern, wenn Sie es auf einem Gerät oder im Entwicklungsmodus + Gerätemodus in Ihrem Browser anzeigen.

Answer 4

Eine einfache Lösung:

die .tab-nav-wrapper eine feste Höhe geben, die die Höhe der li Elemente (Navigationselemente), und dass Überströmelementen verstecken sollte (hier wir die Scrollbar ausblenden möchten):

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

Dann machen die ul scrollbaren (nur Richtung x) und die li-Elemente bricht in eine neue Zeile verhindern:

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

Das ist alles :). Kein Javascript erforderlich, damit es funktioniert: http://codepen.io/anon/pen/RarPxp