淘宝分类导航条；纯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>
用到的一张阴影图片：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3RhcmN1YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
淘宝分类导航条；纯css实现固定导航栏的更多相关文章
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- 纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 纯CSS制作二级导航
一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- 纯css实现tab导航
仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
随机推荐
- 《Android编程权威指南》PhotoGallery应用梳理
PhotoGalley是<Android编程权威指南>书中另外一个重要的应用.
- 从 dig（nslookup） bind —— windows 下的域名解析服务器信息的查看
dig(domain information groper,之所以选择这三个词,在于这三个词的首字母构成的词 dig 也有探索挖掘的含义)本身是 Linux 下的查询 DNS 信息的工具,功能类似 n ...
- WebServic调用天气预报服务
在项目开发中,我们除了发布WebService提供客户调用外,也经常需要调用一些客户或者第三方的WebService服务,这里就通过一个Demo来演示调用一个第三方的天气预报服务. 1.天气预报服务接 ...
- ToF相机学习笔记之基本知识
ToF相机属于一种非接触式光学传感器,通过计算发射激光的飞行时间获取对应像素的深度信息.就非接触式距离测量方法而言,其分类可用下表表示如下: 1.1 ToF传感器基础 一个逐点式的ToF传感器采用了雷 ...
- Inter-process Communication (IPC)
For Developers > Design Documents > Inter-process Communication (IPC) 目录 1 Overview 1.1 I ...
- OpenSUSE下支持托盘的邮件客户端Sylpheed
在网上搜索了很多客户端想支持系统托盘,发现一个很不错的邮件客户端Sylpheed.设置方式和foxmail很像,最为重要的是支持系统托盘,很方便,默认没有开启,简单设置下:配置->通用首选项-& ...
- 关于servlet的web.xml映射
1.原理 <servlet> <!-- servlet的名字,随便起个名,但和下面的servlet名一致 --> <servlet-name>hello</s ...
- python数据处理技巧二
python数据处理技巧二(掌控时间) 首先简单说下关于时间的介绍其中重点是时间戳的处理,时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00 ...
- JNI之——Can't load IA 32-bit .dll on a AMD 64-bit platform错误的解决
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46605003 在JNI开发中,Java程序须要调用操作系统动态链接库时,报错信息: ...
- NYOJ 203 三国志(Dijkstra+贪心)
三国志 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 <三国志>是一款非常经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.如今他把游戏简化一下 ...