移动端左右滑动的导航的简单实现方法

移动端  类似于上图的效果的简单实现   

<div id="nav"><ul class="list"><li class="item">菜单1</li><li class="item">菜单2</li><li class="item">菜单3</li><li class="item">菜单4</li><li class="item">菜单5</li><li class="item">菜单6</li><li class="item">菜单7</li><li class="item">菜单8</li></ul></div>

css

body {width: 100%;overflow-x: hidden;}li {list-style: none;}#nav {width: 100%;height: 80px;overflow-x: scroll;position: relative;}#nav:before{content: '';position: absolute;display: block;width: 100%;height: 10px;background: #fff;left: 0;bottom: 0;z-index: 20;}.list {width: 500%;box-sizing: border-box;}.item {float: left;width: 150px;height: 50px;font-size: 30px;line-height: 50px;margin-right: 30px;text-align: center;}