效果如下:

页面如下:

<!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. 学习 PHP SOAP 扩展的一些笔记
  2. 通过ssh建立点对点的隧道,实现两个子网通信
  3. docker常用命令,安装常用实例,一步式安装mysql
  4. 关于android Intent意图的一点心得
  5. 数组中的两个常见异常
  6. [18/11/29] 继承(extends)和方法的重写(override,不是重载)
  7. (三)Omniglot Dataset介绍
  8. 文件app如何连接服务器,如何实现app与服务器连接数据库
  9. x64 盗版PCHunter
  10. 毕业论文格式大全、排版技巧及常见问题汇总
  11. 如何用MATLAB编写FIR维纳滤波器,最佳FIR维纳滤波器实现
  12. 汽车电工及电子技术基础【1】
  13. gp和mysql数据库_gp数据库 连接
  14. 开启微信悬浮窗权限有什么用_这个功能比微信自带的还好用
  15. nginx: [warn] the “user“ directive makes sense only if the master process runs with super-user privi
  16. a += a-= a*a
  17. 双鱼林 android 服务器,双鱼林安卓Android代码生成器下载_双鱼林安卓Android代码生成器官方下载-太平洋下载中心...
  18. linux图形界面没有输入法,fcitx 输入法看不到选词,上面键盘也不见了!
  19. 【分析】编程和数学是什么关系?为什么编程学习这么火?
  20. 手机测试属于硬件测试还是软件测试6,红米手机的硬件测试的2种基本操作

热门文章

  1. 软件工程 第一章 软件工程概述
  2. 如何用ipad或者是iphone来无线投屏到电视机
  3. 实战 | 文件下载、及浏览器加速导致不能下载的问题
  4. 渝粤题库 陕西师范大学 《教育经济学》作业
  5. Markdown在表格中加入竖线的方法
  6. WinDebug dump
  7. 怎么看数据库版本mysql_MySQL数据库之如何查看MySQL的版本?
  8. MP26123DR三节串联锂电池充放电电路
  9. LIS系统通讯程序原理与实现
  10. js 将完整的浏览器型号判断