स्क्रॉलिंग टैब के साथ क्षैतिज टैब आधारित मेनू

Question

मेरे पास टैब की तरह एक साधारण क्षैतिज मेनू है .. मैं इसे बीबीसी ऐप टैब मेनू की तरह काम करना चाहता हूं, ताकि जब मेनू में अधिक आइटम हों तो यह दोनों दिशाओं में क्षैतिज स्क्रॉलिंग की अनुमति देगा।

मेरे कोड का एक ही यहाँ है http://codepen.io/anon/pen/GZRaee

मैंने कोशिश की यह कुछ बात लेकिन कुछ भी काम करने के लिए लगता है की तरह मैं निश्चित चौड़ाई के साथ div में मेनू लपेटा जाता है और यह स्क्रॉल करने योग्य बनाने के लिए करने की कोशिश की लेकिन वह काम नहीं किया क्योंकि यह हमेशा स्क्रॉल-बार जोड़ता है। मैंने इसे कैरोसेल बनाने की कोशिश की जो मेरे लिए काम नहीं करता था।

क्या एचटीएमएल आधारित वेबसाइट के लिए कोई समान प्लग है। बीबीसी ऐप द्वारा उपयोग की जाने वाली एनवी बार ऐप में काफी आम है, मेरी इच्छा है कि मेरे पास मोबाइल संस्करण के लिए एचटीएमएल आधारित वेबपृष्ठ के लिए कुछ समान हो।

<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

आप Owl Carousel 2 के साथ ऐसा कर सकते हैं। जैसा कि आप देख सकते हैं कि आप क्षैतिज रूप से माउस ड्रैग के साथ टैब स्क्रॉल कर सकते हैं और कोई क्षैतिज स्क्रॉल बार नहीं है। इसके अलावा मैंने अलग-अलग चौड़ाई पर टैब दिखाने की संख्या समायोजित करने के लिए responsive विकल्प का उपयोग किया लेकिन आप इसे संशोधित कर सकते हैं। यहाँ a Fiddle और 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

मैं आप निम्नलिखित कोड है कि मूल रूप से आवरण ऊंचाई मजबूर कर और उसके अतिप्रवाह छुपा कर स्क्रॉलबार खाल के साथ codepen बदल दिया है।

.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

Answer 3

एक तत्व में सामग्री स्क्रॉल करने योग्य बनाने के लिए, पहले हम तत्व को overflow: scroll या overflow: auto जोड़ने की जरूरत है। (अंतर here देखें।)

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

फिडल: http://codepen.io/anon/pen/VaeLje

नायब: इस codepen उदाहरण में स्क्रॉल के साथ एक मुद्दा है। माउस व्हील स्क्रॉल काम नहीं करता है, लेकिन यदि आप इसे किसी डिवाइस पर देख रहे हैं, या अपने ब्राउज़र में विकास मोड + डिवाइस मोड में खींचकर स्क्रॉल कर सकते हैं।

Answer 4

एक सरल समाधान:

.tab-nav-wrapper एक निश्चित ऊंचाई जो ली आइटम की ऊंचाई (नेविगेशन आइटम) होना चाहिए देने के लिए और तत्वों को छिपाने कि अतिप्रवाह (यहाँ हम स्क्रॉलबार छुपाना चाहते हैं):

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

फिर ul स्क्रॉल (केवल एक्स दिशा) बनाने के लिए और एक नई लाइन को तोड़ने से ली तत्वों को रोकने:

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

यह सब है :)। इसे काम करने के लिए कोई जावास्क्रिप्ट आवश्यक नहीं है: http://codepen.io/anon/pen/RarPxp