移动端导航栏简单滚动效果

<!DOCTYPE html>
<html>
<head>
<title>移动端导航栏简单滚动</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
<style type="text/css">



*{
margin: 0;
padding: 0;
}
body{
width: 100%;
/*overflow-x: hidden;*/
}


.wrap{
width: 640px;
overflow: hidden;
/*overflow-x: hidden;*/
}
.wrap ul {
position: relative;
top: 0;
left: 0;
list-style: none;
overflow-x: hidden;
overflow-y: hidden;
transition: left 0.5s;
background-color: #000;
}
.wrap ul li{
float: left;
padding: 3px 15px;
color: #fff;
}
.f{
padding: 10px;
}


::-webkit-scrollbar {
display:none
}


#category-head{
width:100%;
white-space: nowrap;
overflow-x:auto;
float:left;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#category-head li{
display:inline-block;
padding:7px 8px;
}


</style>
</head>
<body>
<div class="wrap">
<ul id="test">

</ul>
</div>


<ul id="category-head">
       <li class="flex" style="" id="brand_cat" searchtype="brand">品牌团</li>
       <li class="flex" style="" data-ic="1" searchtype="goods">美体个护</li>
       <li class="flex hover" style="" data-ic="4" searchtype="goods">食品保健</li>
       <li class="flex" style="" data-ic="7" searchtype="goods">婴幼儿</li>
       <li class="flex" style="" data-ic="10" searchtype="goods">百货</li>
       <li class="flex" style="" data-ic="13" searchtype="goods">数码</li>
       <li class="flex" style="" id="brand_cat" searchtype="brand">品牌团</li>
       <li class="flex" style="" data-ic="1" searchtype="goods">美体个护</li>
       <li class="flex hover" style="" data-ic="4" searchtype="goods">食品保健</li>
       <li class="flex" style="" data-ic="7" searchtype="goods">婴幼儿</li>
       <li class="flex" style="" data-ic="10" searchtype="goods">百货</li>
       <li class="flex" style="" data-ic="13" searchtype="goods">数码</li>
</ul>






</body>


</html>

//说明: li里面也可以放置图片或者图片文字相关


没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭