效果如下:

页面如下:

<!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实现固定导航栏相关推荐

  1. css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)

    内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片 第二步: 在网页 区添加样式定义 [code] /* = ...

  2. css淘宝下拉菜单,纯css打造最简洁下拉菜单-无js-非常实用

    先上图:(点击图片可到楼主的个人网站) 样式部分: 分全局,一级菜单和二级菜单.初始化二级的ul 的display 默认是隐藏的. /*公共全局*/ *{ margin:0; padding:0;} ...

  3. 漂亮纯css蓝白色横向导航条代码

    漂亮纯css蓝白色横向导航条代码 展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. HTML5期末大作业:淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作 ...

  5. cat_get - 获得淘宝分类详情-API接口

    今天分享的是获得淘宝分类详情: 淘宝的API开发接口,我们需要做下面几件事情. 1)开放平台注册开发者账号: 2)然后为每个淘宝应用注册一个应用程序键(App Key) : 3)下载淘宝API的SDK ...

  6. 淘宝/Tmall获得淘宝分类详情API返回值说明

    淘宝/Tmall获得淘宝分类详情API返回值说明: 1.请求参数 (支持高并发请求接口) 请求参数:cid=16 参数说明:cid:商品分类ID,可以用cid=0来获得所有一级类目 2.请求公共参数: ...

  7. Android 淘宝滑动条,淘宝菜单滑动条;

    淘宝菜单滑动条,图如下: 实现一下这个效果 , 上面是列表,可以用RecyclerView实现 , 下面跟随菜单滑动的条可以用View做位移动画实现: <LinearLayout xmlns:a ...

  8. 淘宝网 API接口 cat_get - 获得淘宝分类详情

    cat_get - 获得淘宝分类详情 免费测试网址:http://console.open.onebound.cn/console/?i=Ed Result Object: { "items ...

  9. 淘宝网 1688 API接口 cat_get - 获得淘宝分类详情

    测试网站:联系客服开通测试  cat_get - 获得淘宝分类详情 Result Object: { "items": { "item": [ { " ...

最新文章

  1. Calendar类点点滴滴积累
  2. matlab 二值化_MATLAB实验,图像二值化处理
  3. Gideo-0.1.ebuild 第五个练手作品[原创]
  4. UVA 146 ID Codes
  5. python公开发行版本_Python2 最后一个版本发布,正式迈入 Python3 时代
  6. office 高效办公智慧树_干货高效实用的office办公小技巧之word篇
  7. 连接堡垒机出现java环境_Java 8:长期支持的堡垒
  8. [转载][QT][SQL]sql学习记录3_sqlite之update delete like
  9. SSH远程登录VWware上的LFS
  10. CTS(14)---Android O CTS 测试之Media相关测试小结(二)
  11. MySQL用函数统计记录总数_在mysql中使用COUNT 或者SUM函数计算记录总数
  12. 浅析“远程对象调用”
  13. Open***学习笔记——*** Server网络配置
  14. 进程调度优先数 c语言,进程调度--动态优先数法(C语言实现)
  15. Java网络编程之通过代码实现Socket通信
  16. BAT文件中如何注释
  17. 某程序员披露华为外包员工现状:工作氛围好,没有歧视,但转正后也不算正式员工?...
  18. 安卓代替苹果的软件_苹果健身可以代替您的健身房或贵宾会员吗
  19. 连分数与丢番图方程简介
  20. laravel-admin Model does not exists添加模型报错

热门文章

  1. iOS GIF 格式动画 图片显示
  2. android各版本的差别
  3. 解决redis高并发问题的几种思路
  4. 华为服务器网口显示down,[已解决]华为三层交换机新建vlan后端口总是down的状态[已解决]~有好心人帮忙看看吗?谢谢~ - 华为技术论坛 - 51CTO技术论坛_中国领先的IT技术社区...
  5. 七:面向对象-->方法重写(重写优化电子宠物系统为例)
  6. php中怎样把图片改大,PHP怎么批量修改图片大小?
  7. JAVA程序员面试至尊宝典
  8. 素数筛法(传统普通、朴素筛法、埃式筛法、欧拉筛法(线性筛))
  9. 刷题集--郁闷的出纳员
  10. DLNA」的介紹與應用