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

Question

我需要一个可以左右滑动的滑动水平菜单，以防菜单有更多元素。

我已经在 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>

Answer 1

使用此代码在 li 显示中使用:table-cell;..

	$('.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
{
	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>