淘宝分类导航条；纯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> ...

随机推荐

冒泡排序算法 C#版
冒泡排序算法的运作如下: 1.比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 3.针对所 ...
Redis封装之Hash
RedisHashService: /// <summary> /// Hash:类似dictionary,通过索引快速定位到指定元素的,耗时均等,跟string的区别在于不用反序列化,直 ...
BZOJ2337: [HNOI2011]XOR和路径(高斯消元，期望)
解题思路: Xor的期望???怕你不是在逗我. 按为期望,新技能get 剩下的就是游走了. 代码: #include<cmath> #include<cstdio> #incl ...
Yeslab华为安全HCIE七门之--防火墙高级技术（17篇）
Yeslab 全套华为安全HCIE七门之第三门防火墙高级技术课程目录: 华为安全HCIE-第三门-防火墙高级技术(17篇)\1_用户认证_用户_认证域_认证策略.avi 华为安全HCIE- ...
Windows 一键关闭UAC、防火墙、IE配置脚本
有时候,在环境需求下,需要关闭windows防火墙,UAC,以及IE选项配置. 对不懂电脑来说是比较麻烦的,老是得教他们,关键还记不住…… so,以下脚本就可以解决这个问题注:脚本需要右键以管理 ...
cassandra install - +HeapDumpOnOutOfMemoryError -Xss180k
原因分析: You are running out of allocted memory for the JAVA VM (128k) is to less. Modify the line belo ...
什么是PV和UV?
技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...
TRIZ系列-创新原理-31-多孔材料原理
多孔材料原理的详细描写叙述例如以下:1)让物体变成多孔的.或者使用辅助的多孔部件(如插入,覆盖):2)假设一个物体已经是多孔了,那么事先往里面填充某种物质:这个原理提出的原因是,一般机械系统通常都是由 ...
在 Android 应用程序中使用 SQLite 数据库以及怎么用
part one : android SQLite 简单介绍 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库.它支持 SQL 语言,而且仅仅利用非常少的内存就有非常好的性能.此外它还是开 ...
关于mysql数据库在输入password后，滴的一声直接退出界面的解决的方法（具体办法）
前一阵子.因为敲代码要用到数据库,便在本子上下载了一个,却出现非常多小问题(自己的台式机却没有该问题,可能是本人的本子太渣了吧),纠结了好一阵,回头想想.发现问题,分析问题,解决这个问题,不就是我们的 ...

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

淘宝分类导航条；纯css实现固定导航栏的更多相关文章

随机推荐

热门专题