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

来源：互联网发布：360比价软件编辑：程序博客网时间：2024/04/29 05:48
效果如下：
页面如下：
<!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>
用到的一张阴影图片：
0 0