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

<!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里面也可以放置图片或者图片文字相关


阅读更多
文章标签: css
个人分类: css
想对作者说点什么? 我来说一句

仿今日头条顶部导航栏效果

2015年01月06日 608KB 下载

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭