mui横向滑动菜单

<style>
.mui-bar a {
color: #E02D26;
}
#topItem {
background: white;
border-bottom: 1px solid #EEEEEE;
}
.mui-slider .mui-segmented-control.mui-scroll-wrapper {
height: 40px;
}
.mui-slider .mui-segmented-control .mui-control-item {
line-height: 37px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
padding: 0 12px
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
border-bottom: 2px solid white;
color: black;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
border-bottom: 2px solid #E02D26;
color: #E02D26;
font-weight: bold;
}
.mui-slider-group .mui-slider-item {
height: 0px;
}
</style>

 

<div id="slider" class="mui-slider">
<div id="topItem" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" id="top-scroll">
<a class='mui-control-item mui-active' href="#item1mobile">男装</a>
<a class='mui-control-item' href="#item2mobile">女装</a>
<a class='mui-control-item' href="#item3mobile">手机</a>
<a class='mui-control-item' href="#item4mobile">护肤</a>
<a class='mui-control-item' href="#item5mobile">护发</a>
<a class='mui-control-item' href="#item6mobile">电脑</a>
<a class='mui-control-item' href="#item7mobile">家具</a>
<a class='mui-control-item' href="#item8mobile">护理</a>
<a class='mui-control-item' href="#item9mobile">厨房</a>
<a class='mui-control-item' href="#item10mobile">卫浴</a>
<a class='mui-control-item' href="#item11mobile">幼儿</a>
<a class='mui-control-item' href="#item12mobile">童装</a>
<a class='mui-control-item' href="#item13mobile">零食</a>
<a class='mui-control-item' href="#item14mobile">运动</a>
<a class='mui-control-item' href="#item15mobile">手表</a>
<a class='mui-control-item' href="#item16mobile">内衣</a>
<a class='mui-control-item' href="#item17mobile">箱包</a>
<a class='mui-control-item' href="#item18mobile">书籍</a>
<a class='mui-control-item' href="#item19mobile">茶酒</a>
<a class='mui-control-item' href="#item20mobile">配件</a>
</div>
</div>
<!--勿删除以下代码，作用是保证顶部菜单动画-->
<div class="mui-slider-group" style="height: 0px;">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active"></div>
<div id="item2mobile" class="mui-slider-item mui-control-content"></div>
<div id="item3mobile" class="mui-slider-item mui-control-content"></div>
<div id="item4mobile" class="mui-slider-item mui-control-content"></div>
<div id="item5mobile" class="mui-slider-item mui-control-content"></div>
<div id="item6mobile" class="mui-slider-item mui-control-content"></div>
<div id="item7mobile" class="mui-slider-item mui-control-content"></div>
<div id="item8mobile" class="mui-slider-item mui-control-content"></div>
<div id="item9mobile" class="mui-slider-item mui-control-content"></div>
<div id="item10mobile" class="mui-slider-item mui-control-content"></div>
<div id="item11mobile" class="mui-slider-item mui-control-content"></div>
<div id="item12mobile" class="mui-slider-item mui-control-content"></div>
<div id="item13mobile" class="mui-slider-item mui-control-content"></div>
<div id="item14mobile" class="mui-slider-item mui-control-content"></div>
<div id="item15mobile" class="mui-slider-item mui-control-content"></div>
<div id="item16mobile" class="mui-slider-item mui-control-content"></div>
<div id="item17mobile" class="mui-slider-item mui-control-content"></div>
<div id="item18mobile" class="mui-slider-item mui-control-content"></div>
<div id="item19mobile" class="mui-slider-item mui-control-content"></div>
<div id="item20mobile" class="mui-slider-item mui-control-content"></div>
</div>
</div>

转载于:https://www.cnblogs.com/daochong/p/10278298.html