一、HTML
<nav class="branch_nav">
<ul class="branch_swipe">
<li>全球购</li>
<li>母婴</li>
<li>出行</li>
<li>服务</li>
<li>厨房</li>
<li>饮食</li>
<li >服用</li>
<li>其他<li>
<li>全球购</li>
</ul>
</nav>
二、css
.branch_nav{
width: 100%;
height: rem(80);
position: relative;
overflow:hidden;
border-top:rem(2) solid #D2D2D2;
box-shadow: rem(670) 0 rem(80) rem(0)#F5F5F5 inset;
padding-left:rem(25);
}
.branch_nav ul{
display: flex;
width:130%;
margin-bottom: 0;
position: absolute;
left: 0;
}
.branch_nav ul li{
height: rem(80);
line-height: rem(80);
flex-grow: 1;
text-align: center;
font-size: rem(22);
box-sizing: border-box;
list-style: none;
color:#9D9D9D;
}
.branch_nav ul li:hover{
color:#F96E9D;
border-bottom:rem(4) solid #F96E9D;
}
三、js
（1）引入插件：
<script type="text/javascript" src="js/zepto.min.js"></script>
（2）jq代码：
//滑动nav：
$('.branch_swipe').swipeLeft(function(){
$(this).animate({'left':-30 + '%'})
})
$('.branch_swipe').swipeRight(function(){
$(this).animate({'left':0 + '%'})
})
