html5 中导航栏中菜单过长，在Div上层添加提示左右滑动的箭头，使用Hello mui功能

来源：互联网发布：java loggerfactory 编辑：程序博客网时间：2024/06/07 05:01

使用hello mui主要设计，一开始不知道怎么做，后来突然想到使用position:absoulte;可以将元素固定到某一位置，所以就在和导航栏同一DIV级别的地方添加了span元素，虽然图表没有特别的美化，但是总体的功能实现了。

<div class="mui-header mui-bar-nav " style="padding-top: 44px;width: 100%;height: 30px; ">
<div id="slider" class=" mui-slider">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a <c:if test="${param.CHANGE_ID eq '1'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([1,2,1])">
移动网发展
</a>
<a <c:if test="${param.CHANGE_ID eq '2'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([17,2,2])">
宽带
</a>
<a <c:if test="${param.CHANGE_ID eq '3'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([21,2,3])">
4G
</a>
<a <c:if test="${param.CHANGE_ID eq '4'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([3,2,4])">
合约发展
</a>
<a <c:if test="${param.CHANGE_ID eq '5'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([4,2,5])">
智能终端
</a>
<a <c:if test="${param.CHANGE_ID eq '6'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([1,3,6])">
C网出账用户
</a>
<a <c:if test="${param.CHANGE_ID eq '7'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([1,1,7])">
C网出账
</a>
<a <c:if test="${param.CHANGE_ID eq '8'}"> class="mui-control-item mui-active"</c:if> class="mui-control-item" href="javaScript:toChange([20,1,8])">
全网出账
</a>
</div>
<span class="mui-navigate-right" style="font-size:20px;padding-top:40px;bottom:0;position:absoulte;"></span>
<span class="mui-navigate-left" style="font-size:20px;padding-top:40px;bottom:0;position:absoulte;"></span>
</div>
</div>
</div>

1 0