淘宝分类导航条；纯css实现固定导航栏

效果如下：

页面如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
ul, ol {list-style: none outside none;
}
.nav-wrap {width:100%;height: 60px;
}
.float-navbar {border-bottom: 1px solid #F3F3F3;margin: 0;padding: 0;position: fixed;top: 0;z-index: 90000;
}
.navbar {border-bottom: 1px solid #FFFFFF;width: 100%;background: none repeat scroll 0 0 #F7F7F7;
}
.fullscreen{border-bottom: 1px solid #FFFFFF;
}
.clearfix:before, .clearfix:after {content: "";display: table;line-height: 0;
}
.clearfix:after {clear: both;
}
.clearfix:before, .clearfix:after {content: "";display: table;line-height: 0;
}.cat-index {background: none repeat scroll 0 0 #F7F7F7;margin: 0 auto;padding: 0 7px;width: 976px;
}.cat-index li {float: left;padding: 9px 0;text-align: center;width: 61px;
}.cat-index li a
{text-decoration:none;background: none repeat scroll 0 0 transparent;cursor: pointer;display: block;overflow: hidden;padding: 0 7px 0 8px;position: relative;width: 46px;
}.cat-index li .text {color: #FFFFFF;display: block;font-family: helvetica,stheiti,"微软雅黑";font-size: 14px;font-style: normal;line-height: 46px;padding: 0;position: absolute;width: 46px;top:46px;
}.cat-index li .shadow {background: url("../image/shadow.png") no-repeat scroll 0 0 transparent;display: block;height: 46px;left: 8px;position: absolute;top: 0;width: 46px;z-index: 10;
}.cat-index li .icon {background-color: #CCCCCC;color: #FFFFFF;display: block;font-family: "hesperindex";font-size: 30px;font-style: normal;height: 46px;line-height: 46px;width: 46px;
}
</style><style type="text/css">
.content
{width:980px;margin:auto;height:800px;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script><script type="text/javascript">$(function () {var box = ["#66aae9", "#ef7b91", "#8f8cac", "#91b566", "#8f8cac", "#79d9f3", "#79d9f3", "#fa5f94", "#f78499", "#ed9e5b", "#b9d329", "#ea3535", "#66aae9", "#5ddce3", "#69bcf3", "#ffae5b"];$(".name").hover(function () {var oThis = this;$(this).find(".text").show();$(this).find(".text").css("background", box[$(oThis).attr("data-id") - 1]);$(this).find(".text").animate({ top: "0px" }, 300);}, function () {$(this).find(".text").animate({ top: "46px" }, 300);})$(".name").click(function () {var ele = $(".name");$.each(ele, function () {$(this).find(".icon").css("background", "#CCCCCC");})$(this).find(".icon").css("background", box[$(this).attr("data-id") - 1]);})})</script>
</head>
<body><div class="nav-wrap"><div id="J_navbar" class="navbar float-navbar"><div class="fullscreen"><ul class="cat-index clearfix"><li id="nav-cat1" class=""><a class="name J_catindex t1" href="javascript:;" data-id="1"><i class="shadow"></i><i class="icon">男</i><i class="text hidden" style="top: 46px;">男装</i></a></li><li id="nav-cat2" class=""><a class="name J_catindex t2" href="javascript:;" data-id="2"><i class="shadow"></i><i class="icon">女</i><i class="text hidden" style="top: 46px;">女装</i></a></li><li id="nav-cat3" class=""><a class="name J_catindex t3" href="javascript:;" data-id="3"><i class="shadow"></i><i class="icon">内</i><i class="text hidden" style="top: 46px;">内衣</i></a></li><li id="nav-cat4" class=""><a class="name J_catindex t4" href="javascript:;" data-id="4"><i class="shadow"></i><i class="icon">包</i><i class="text hidden" style="top: 46px;">鞋包</i></a></li><li id="nav-cat5" class=""><a class="name J_catindex t5" href="javascript:;" data-id="5"><i class="shadow"></i><i class="icon">饰</i><i class="text hidden" style="top: 46px;">配饰</i></a></li><li id="nav-cat6" class=""><a class="name J_catindex t6" href="javascript:;" data-id="6"><i class="shadow"></i><i class="icon">妆</i><i class="text hidden" style="top: 46px;">美妆</i></a></li><li id="nav-cat7" class=""><a class="name J_catindex t7" href="javascript:;" data-id="7"><i class="shadow"></i><i class="icon">吃</i><i class="text hidden" style="top: 46px;">食品</i></a></li><li id="nav-cat8" class=""><a class="name J_catindex t8" href="javascript:;" data-id="8"><i class="shadow"></i><i class="icon">电</i><i class="text hidden" style="top: 46px;">数码</i></a></li><li id="nav-cat9" class=""><a class="name J_catindex t9" href="javascript:;" data-id="9"><i class="shadow"></i><i class="icon">家</i><i class="text hidden" style="top: 46px;">家居</i></a></li><li id="nav-cat10" class=""><a class="name J_catindex t10" href="javascript:;" data-id="10"><i class="shadow"></i><i class="icon">货</i><i class="text hidden" style="top: 46px;">百货</i></a></li><li id="nav-cat11" class=""><a class="name J_catindex t11" href="javascript:;" data-id="11"><i class="shadow"></i><i class="icon">文</i><i class="text hidden" style="top: 46px;">文具</i></a></li><li id="nav-cat12" class=""><a class="name J_catindex t12" href="javascript:;" data-id="12"><i class="shadow"></i><i class="icon">书</i><i class="text hidden" style="top: 46px;">书本</i></a></li><li id="nav-cat13" class=""><a class="name J_catindex t13" href="javascript:;" data-id="13"><i class="shadow"></i><i class="icon">虚</i><i class="text hidden" style="top: 46px;">虚拟</i></a></li><li id="nav-cat14" class=""><a class="name J_catindex t14" href="javascript:;" data-id="14"><i class="shadow"></i><i class="icon">闲</i><i class="text hidden" style="top: 46px;">闲置</i></a></li><li id="nav-cat15" class=""><a class="name J_catindex t15" href="javascript:;" data-id="15"><i class="shadow"></i><i class="icon">潮</i><i class="text hidden" style="top: 46px;">潮品</i></a></li><li id="nav-cat16" class="selected"><a class="name J_catindex t16" href="javascript:;" data-id="16"><i class="shadow"></i><i class="icon">情</i><i class="text hidden" style="top: 46px;">情侣</i></a></li></ul></div></div>
</div><div class="content">
测试页面
</div></body>
</html>

用到的一张阴影图片：

淘宝分类导航条；纯css实现固定导航栏相关推荐

css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
css淘宝下拉菜单,纯css打造最简洁下拉菜单-无js-非常实用
先上图:(点击图片可到楼主的个人网站) 样式部分: 分全局,一级菜单和二级菜单.初始化二级的ul 的display 默认是隐藏的. /*公共全局*/ *{ margin:0; padding:0;} ...
漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
cat_get - 获得淘宝分类详情-API接口
今天分享的是获得淘宝分类详情: 淘宝的API开发接口,我们需要做下面几件事情. 1)开放平台注册开发者账号: 2)然后为每个淘宝应用注册一个应用程序键(App Key) : 3)下载淘宝API的SDK ...
淘宝/Tmall获得淘宝分类详情API返回值说明
淘宝/Tmall获得淘宝分类详情API返回值说明: 1.请求参数 (支持高并发请求接口) 请求参数:cid=16 参数说明:cid:商品分类ID,可以用cid=0来获得所有一级类目 2.请求公共参数: ...
Android 淘宝滑动条，淘宝菜单滑动条；
淘宝菜单滑动条,图如下: 实现一下这个效果 , 上面是列表,可以用RecyclerView实现 , 下面跟随菜单滑动的条可以用View做位移动画实现: <LinearLayout xmlns:a ...
淘宝网 API接口 cat_get - 获得淘宝分类详情
cat_get - 获得淘宝分类详情免费测试网址:http://console.open.onebound.cn/console/?i=Ed Result Object: { "items ...
淘宝网 1688 API接口 cat_get - 获得淘宝分类详情
测试网站:联系客服开通测试 cat_get - 获得淘宝分类详情 Result Object: { "items": { "item": [ { " ...

淘宝分类导航条；纯css实现固定导航栏

淘宝分类导航条；纯css实现固定导航栏相关推荐

最新文章

热门文章