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

使用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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值