動態寬度的水平滾動/滑動菜單

我需要一個滑動水平菜單，在菜單中有更多項目時可以向左滑動&。動態寬度的水平滾動/滑動菜單

我已經在水平菜單上設置了codepen的示例。這菜單是好的，我有4項，如果我添加第5或第6項，然後其他菜單項不可見。

如何添加幻燈片的左側或右側功能，以便用戶可以向右滑動以查看其他菜單項。我們有類似的Android或IOS應用程序菜單。 HTML版本有沒有類似的東西？

我如何解決此代碼使其工作。

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>

來源

2016-02-29 Learning

你可以去滑塊類型效應。旋轉木馬是我正在談論的不是圖像，而是你的菜單項。 – divy3993

我試圖將ul包裹在另一個div中，並給了這個潛水溢出x：滾動，但滾動條會顯示..我正在解決這個問題，但沒有工作http://codepen.io/anon/pen/WwNqEo?editors= 1100 – Learning

@ divy3993，我也想到了這一點，但我沒有嘗試，因爲我必須看看在這種情況下使用carousal .. – Learning

使用此代碼的裏顯示使用：表細胞; ..

\t $('.tab-nav-wrapper ul li a').click(function(){ 
 
    $('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('.tab-content-wrapper > div').hide(); 
 
$('.tab-content-wrapper > div').eq($(this).parent().index()).show(); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font: 300 100% 'Helvetica Neue', Helvetica, Arial; 
 
} 
 

 
.tab-container { 
 
    margin: 0 !important; 
 
    padding: 0px; 
 
    height: 100%; 
 
} 
 

 
.tab-nav-wrapper { 
 
    width: 360px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.current-tab { 
 
    color: #000 !important; 
 
} 
 

 
.tab1-c, 
 
.tab2-c, 
 
.tab3-c, 
 
.tab4-c, 
 
.tab5-c { 
 
    display: none; 
 
} 
 

 
.tab-content-wrapper { 
 
    width: 360px; 
 
    min-height: 500px; 
 
    background-color: #f5f5f5; 
 
    margin: 0 auto; 
 
} 
 

 
.tab-nav-wrapper > ul { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
    width: 100%; 
 
    z-index: 100; 
 
    overflow:auto; 
 
    background-color: #ccc; 
 
} 
 

 
.tab-nav-wrapper > ul li { 
 
    display: inline-block; 
 
     display: table-cell; 
 
    text-align: center; 
 
    margin-right: -5px !important; 
 
} 
 

 
.tab-nav-wrapper > ul li a { 
 
    display: inline-block; 
 
    width: auto; 
 
    padding: 15px 5px; 
 
    margin: 0; 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.two:hover ~ hr { 
 
    margin-left: 20%; 
 
    background: #006097; 
 
} 
 

 
.three:hover ~ hr { 
 
    margin-left: 40%; 
 
    background: #f18b2d; 
 
} 
 

 
.four:hover ~ hr { 
 
    margin-left: 60%; 
 
    background: #683177; 
 
} 
 

 
.five:hover ~ hr { 
 
    margin-left: 80%; 
 
    background: #ffd100; 
 
} 
 
.six:hover ~ hr { 
 
    margin-left: 100%; 
 
    background: red; 
 
} 
 

 
.tab-nav-wrapper > ul hr { 
 
    height: 5px; 
 
    width: 20%; 
 
    margin: 0; 
 
    background: #00a0df; 
 
    border: none; 
 
    transition: .3s ease-in-out; 
 
    float: left; 
 
} 
 

 
a.active { 
 
    color: #000; 
 
} 
 
ul 
 
{ 
 
\t overflow:auto; 
 
}

<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> 
 
    <li class="six"><a href="#">MenuSIX</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 class="tab5-c"> 
 
    <p>This is FOUR</p> 
 
    </div> 
 

 
    <div>

來源

2016-02-29 07:24:30

我嘗試過同樣的事情，但我不想顯示滾動條時，它應該工作，當我們向左或向右滑動手機等。這是我掙扎的地方。 – Learning

動態寬度的水平滾動/滑動菜單

回答

相關問題