动态宽度的水平滚动/滑动菜单

我需要一个滑动水平菜单，在菜单中有更多项目时可以向左滑动&。动态宽度的水平滚动/滑动菜单

我已经在水平菜单上设置了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

动态宽度的水平滚动/滑动菜单

回答

相关问题