商城左侧大分类导航菜单教程完整... 登录

商城左侧大分类导航菜单教程完整代码

提示:本页面右侧代码编辑器中的代码纯属展示调试代码


本代码最终的效果请用下面的的完整代码,复制到本地运行


完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城左侧大分类导航菜单</title>
</head>
<body>
<style>
    *{
        margin:0;
        padding:0;
        list-style-type:none;
    }
    body{
        line-height:2em;
        font-size:12px
 }
    a{
        color:#666666;
        text-decoration:none;
        }
    .hc_lnav{       /*全部商品导航栏样式*/
 width:190px;
        margin-top: 70px;
        margin-left: 120px;
    }
    .hc_lnav .allbtn{
        position:relative         /*全部商品下面菜单的定位*/
 }
    .hc_lnav .allbtn h2 a{
        line-height:36px;
        background-color:#358000;
        padding-left:10px;
        width:180px;
        display:block;
        height:36px;
        color:#ffffff;
        font-size:14px;
    }
    .hc_lnav .allbtn h2 a:hover {
        background-color:#358000;      /*鼠标停留在全部商品导航栏上面的样式*/
 }
    .hc_lnav .allbtn ul {
         position:absolute;
         background-color:#60a411;        /*鼠标停留在全部商品导航栏上面下面菜单的样式*/
 width:190px;
         display:none;
         height:486px;
         top:36px;
     }
    .hc_lnav .allbtn ul li{          /*ul下面li的样式*/
 padding-bottom:7px;
        clear:both;
        cursor:default
 }
    .hc_lnav .allbtn ul li .tx{          /*每个商品大分类的样式,*/
 line-height:35px;
        background-color:#559b0d;
        padding-left:10px;
        background-repeat:no-repeat;
        height:35px;
    }
    .hc_lnav .allbtn ul li .tx a{
        font-family:微软雅黑, 黑体;
        color: #e6f8e9;font-size:14px;
    }
    .hc_lnav .allbtn ul li .tx a i{
        line-height:25px;                 /*选项旁边的图片*/
 margin-top:5px;
        width:25px;
        float:left;
        height:25px;
        margin-right:10px;
    }
    /*div里面的小图片,像各地名优茶旁边的图*/
 .hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(/upload/course/000/000/006/5822dac38ab18673.png)}
    .hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(/upload/course/000/000/006/5822dadc7f048889.png)}
    .hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(/upload/course/000/000/006/5822daff1dc12522.png)}
    .hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(/upload/course/000/000/006/5822db0c56bdf566.png)}
    .hc_lnav .allbtn ul li dl{       /*菜单下面最右侧的样式*/
 zoom:1;
        color:#ffffff;
        clear:both;
        overflow:auto;
        padding-top:4px
 }
    .hc_lnav .allbtn ul li dl a{           /*菜单下面最左侧的样式*/
 line-height:22px;
        float:left;
        color:#d9e7ce;
        margin-left:6px;
        margin-right:6px;
       }
    .hc_lnav .allbtn ul li dt{        /*最右侧的分类dt样式*/
 padding-left:10px;
        width:30px;
        float:left;
        padding-top:1px
 }
    .hc_lnav .allbtn ul li dd{       /*最左侧的分类dt样式*/
 line-height:22px;
        width:150px;
        float:left;
        padding-top:2px
 }
    /*二级导航隐藏*/
 .hc_lnav .allbtn ul li .pop{            /*二级导航隐藏的样式*/
 border-bottom:#599900 2px solid;
        position:absolute;
        border-left:medium none;
        background-color:#fcfcfc;
        min-height:466px;
        padding-left:30px;
        width:640px;
        padding-right:30px;
        display:none;
        height:464px;
        border-top:medium none;
        border-right:#599900 2px solid;
        padding-top:10px;
        left:190px;
    }
    .hc_lnav .allbtn ul li .pop dl:hover{
        background-color:#f3f3f3                /*鼠标浏览二级隐藏域商品时的背景色*/
 }
    .hc_lnav .allbtn ul li .pop dl a{
        color:#666666;
        margin-left:12px;      /*二级隐藏域商品链接a标签的样式*/
 margin-right:12px
 }
    .hc_lnav .allbtn ul li .pop dt{    /*二级隐藏域最右侧的标签样式*/
 padding-left:5px;
        width:72px;
    }
    .hc_lnav .allbtn ul li .pop dd{       /*二级隐藏域左侧的商品样式标签*/
 width:565px;
        margin-left:-12px;
    }
    .hc_lnav .allbtn ul li .pop .act{         /*二级隐藏域下端的图片*/
 width:640px;
        height:80px;
        overflow:hidden;
        padding-top:10px
 }
    .hc_lnav .allbtn:hover ul{       /*控制一级菜单显示隐藏*/
 display:block
 }
    .hc_lnav .allbtn ul li:hover{
        background-color:#fcfcfc          /*鼠标停留一级隐藏域的背景色*/
 }
    .hc_lnav .allbtn ul li:hover .tx{    /*鼠标停留一级隐藏域商品分类的的背景色*/
 background-color:#f5f5f5
 }
    .hc_lnav .allbtn ul li:hover .tx a{     /*当鼠标停留在另一个a标签上面的时候,上一个a标签的颜色*/
 color:#333333
 }
    .hc_lnav .allbtn ul li:hover .pop{              /*控制二级菜单显示隐藏*/
 display:block;
        top:0px;
        left:190px
 }
    .hc_lnav .allbtn ul li:hover dl{              /*一级隐藏域和二级隐藏域最右侧的字体样式颜色*/
 color:#6e6e6e
 }
    .hc_lnav .allbtn ul li:hover a{
        color:#666666
 }
    .hc_lnav .allbtn ul li:hover a:hover{          /*鼠标停留在商品上面的字体颜色*/
 color:#cd0606
 }
</style>
<!-- 代码部分begin -->
<div class="hc_lnav jslist">
    <div class="allbtn">
        <h2><a href="#"><strong>&nbsp;</strong>全部商品分类<i>&nbsp;</i></a></h2>
        <ul style="width:190px" class="jspop box">
            <li class=a1>
                <div class=tx><a href="#"><i>&nbsp;</i>各地名优茶</a> </div>
                <dl>
                    <dt>热门</dt>
                    <dd>
                        <a href="#">西湖龙井</a>
                        <a href="#">金骏眉</a>
                        <a href="#">大红袍</a>
                        <a href="#">铁观音</a>
                    </dd>
                </dl>
                <dl>
                    <dt>名茶</dt>
                    <dd>
                        <a href="#">红茶</a>
                        <a href="#">绿茶</a>
                        <a href="#">乌龙茶</a>
                        <a href="#">黑茶</a>
                        <a href="#">白茶 </a>
                    </dd>
                </dl>
                <div class=pop>
                    <h3><a href="#">各地名优茶</a></h3>
                    <dl>
                        <dl>
                            <dt>绿茶</dt>
                            <dd>
                                <a class="" href="#">西湖龙井</a>
                                <a class=""  href="#">龙井</a>
                                <a class="" href="#">黄山毛峰</a>
                                <a class=""   href="#">安吉白茶</a>
                                <a class="" href="#">其他绿茶</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>乌龙茶</dt>
                            <dd>
                                <a class="" href="">铁观音</a>
                                <a class=""  href="">大红袍</a>
                                <a class="" href="">水仙</a>
                                <a class=""  href="">肉桂</a>
                                <a class="" href="">台湾乌龙</a>
                                <a class="" href="">其他乌龙茶</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>红茶</dt>
                            <dd>
                                <a class="" href="" >金骏眉</a>
                                <a class=""  href="">正山小种</a>
                                <a class=""  href="">祁门红茶</a>
                                <a class=""   href="">坦洋工夫</a>
                                <a class=""  href="">其他红茶</a>
                                <a class=""    href="">政和工夫</a>
                                <a class=""   href="">滇红工夫</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>黑茶</dt>
                            <dd>
                                <a class="" href="">白沙溪黑茶</a>
                                <a class=""  href="">普洱茶饼</a>
                                <a class="" href="">普洱沱茶</a>
                                <a class=""  href="">普洱茶砖</a>
                                <a class=""  href="">普洱散茶</a>
                                <a class="" href="">其他黑茶</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>白茶</dt>
                            <dd>
                                <a class="" href="#">白牡丹</a>
                                <a class=""  href="">白毫银针</a>
                                <a class="" href="">寿眉</a>
                                <a class="" href="">其他白茶</a>
                            </dd>
                        </dl>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>
                            <a  href="">滋恩</a>
                            <a  href="">远荣</a>
                            <a  href="">顶峰</a>
                            <a  href="">公泰</a>
                            <a  href="">一品堂</a>
                            <a  href="">好吉</a>
                            <a   href="">绿雪芽</a>
                            <a  href="">台湾梅山制茶</a>
                            <a href="" >白沙溪</a>
                            <a href="">联兴茶叶</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>价格</dt>
                        <dd>
                            <a  href="">100元及以下</a>
                            <a  href="">100-300元</a>
                            <a  href="">300元及以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>净含量</dt>
                        <dd>
                            <a  href="" >50g及以下</a>
                            <a   href="">51-100g</a>
                            <a  href="">101-250g</a>
                            <a   href="">250g以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>包装</dt>
                        <dd>
                            <a href="">经济自饮装</a>
                            <a href="" >精美礼品装</a>
                        </dd>
                    </dl>
                    <div class=clr></div>
                    <div class=act><a href=""><img src="/upload/course/000/000/006/5822db4b7e0c2557.jpg" /></a> </div>
                </div>
            </li>
            <li class=a2>
                <div class=tx><a href=""><i>&nbsp;</i>花草保健茶</a> </div>
                <dl>
                    <dt>推荐</dt>
                    <dd>
                        <a href="">大麦茶</a>
                        <a href="">苦荞茶</a>
                        <a href="" >玫瑰花茶</a>
                        <a href="">雪菊</a>
                        <a href="" >蜂蜜木瓜粉</a>
                    </dd>
                </dl>
                <div class=pop>
                    <h3><a href="">花草保健茶</a></h3>
                    <dl>
                        <dl>
                            <dt>瘦身</dt>
                            <dd>
                                <a class="" href="" >玫瑰荷叶茶</a>
                                <a class=""   href="">玄米茶</a>
                                <a  class="" href="">兰香子</a>
                                <a class=""   href="" >纤维泡腾片</a>
                                <a class=""   href="" >青梅苹果酸</a>
                                <a class=""   href="">三草茶</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>美容</dt>
                            <dd>
                                <a class="" href="" >法兰西玫瑰</a>
                                <a class=""  href=""  >冻干柠檬片</a>
                                <a class=""   href="">果粒茶</a>
                                <a    class="" href="" >大麦茶</a>
                                <a class=""   href="">蜂蜜抹茶粉</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>丰胸</dt>
                            <dd>
                                <a class="" href="" >木瓜葛根粉</a>
                                <a class=""    href=""  >蜂蜜木瓜粉</a>
                                <a class=""   href="">红酒木瓜丽人饮</a>
                            </dd>
                        </dl>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>
                            <a href="">与花香</a>
                            <a href="">美丽快攻</a>
                            <a href="" >顶峰</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>价格</dt>
                        <dd>
                            <a href="" >100元及以下</a>
                            <a   href="" >100-300元</a>
                            <a  href="">300元及以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>净含量</dt>
                        <dd>
                            <a href="">50g及以下</a>
                            <a href="">51-100g</a>
                            <a href="">101-250g</a>
                            <a href="">250g以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>包装</dt>
                        <dd>
                            <a href="">经济自饮装</a>
                            <a href="">精美礼品装</a>
                        </dd>
                    </dl>
                    <div class=clr></div>
                    <div class=act><a href=""><img src="/upload/course/000/000/006/5822db638c034508.jpg" /></a></div>
                </div>
            </li>
            <li class=a3>
                <div class=tx><a href=""><i>&nbsp;</i>精选茶具</a> </div>
                <dl>
                    <dt>推荐</dt>
                    <dd>
                        <a href="" >功夫茶具</a>
                        <a href="">个人杯</a>
                        <a href="">茶宠</a>
                        <a href="">茶叶罐</a>
                    </dd>
                </dl>
                <div class=pop>
                    <h3><a href="">精选茶具</a></h3>
                    <dl>
                        <dl>
                            <dt>陶瓷</dt>
                            <dd>
                                <a class="" href="">茶叶罐</a>
                                <a class=""  href="">功夫茶具</a>
                                <a class="" href="" >茶壶</a>
                                <a class=""  href="">茶宠</a>
                                <a class="" href=""  >茶杯</a>
                                <a class=""  href="">茶具礼盒</a>
                            </dd>
                        </dl>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>
                            <a  href="">恒越</a>
                            <a  href="">卓越</a>
                            <a   href="">国尊陶瓷</a>
                            <a  href="">宏远达</a>
                            <a href="">福万利</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>价格</dt>
                        <dd>
                            <a href="">100元及以下</a>
                            <a  href="">100-300元</a>
                            <a  href="">300元及以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>包装</dt>
                        <dd>
                            <a href="">经济自饮装</a>
                            <a  href="">精美礼品装</a>
                        </dd>
                    </dl>
                    <div class=clr></div>
                    <div class=act><a href=""><img src="/upload/course/000/000/006/5822db7711047243.jpg" /></a></div>
                </div>
            </li>
            <li class=a4>
                <div class=tx><a href=""><i>&nbsp;</i>可口茶食</a> </div>
                <dl>
                    <dt>推荐</dt>
                    <dd>
                        <a href="">橄榄</a>
                        <a   href="">冰糖杨梅</a>
                        <a  href="">酸甜梅</a>
                    </dd>
                </dl>
                <div class=pop>
                    <h3><a href="">可口茶食</a></h3>
                    <dl>
                        <dl>
                            <dt>干果</dt>
                            <dd>
                                <a class="" href="">杏仁</a>
                                <a class=""   href="">瓜子</a>
                                <a  class="" href="">开心果</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>零食</dt>
                            <dd>
                                <a class=""  href="">水晶柠檬片</a>
                                <a class=""  href="">方块酥</a>
                                <a class="" href="javascript:;">凤梨酥</a>
                                <a  class="" href="">燕麦巧克力</a>
                            </dd>
                        </dl>
                    </dl>
                    <dl>
                        <dt>品牌</dt>
                        <dd>
                            <a href="">赛园</a>
                            <a  href="">新味</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>价格</dt>
                        <dd>
                            <a  href="">100元及以下</a>
                            <a  href="">100-300元</a>
                            <a  href="">300元及以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>净含量</dt>
                        <dd>
                            <a  href="" >50g及以下</a>
                            <a   href="">51-100g</a>
                            <a  href="">101-250g</a>
                            <a  href="">250g以上</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>包装</dt>
                        <dd>
                            <a  href="">经济自饮装</a>
                            <a   href="">精美礼品装</a>
                        </dd>
                    </dl>
                    <div class=clr></div>
                    <div class=act><a href=""><img src="/upload/course/000/000/006/5822e1629bbd5997.jpg" /></a> </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 代码部分end -->
</body>
</body>
</html>

把代码复制到本地运用看看吧



下一节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城左侧大分类导航菜单</title> </head> <style> *{ margin:0; padding:0; list-style-type:none; } body{ line-height:2em; font-size:12px } a{ color:#666666; text-decoration:none; } .hc_lnav{ /*全部商品导航栏样式*/ width:150px; margin-top: 70px; } .hc_lnav .allbtn{ position:relative /*全部商品下面菜单的定位*/ } .hc_lnav .allbtn h2 a{ line-height:36px; background-color:#358000; padding-left:10px; width:150px; display:block; height:36px; color:#ffffff; font-size:14px; } .hc_lnav .allbtn h2 a:hover { background-color:#358000; /*鼠标停留在全部商品导航栏上面的样式*/ } .hc_lnav .allbtn ul { position:absolute; background-color:#60a411; /*鼠标停留在全部商品导航栏上面下面菜单的样式*/ width:150px; display:none; height:686px; top:36px; } .hc_lnav .allbtn ul li{ /*ul下面li的样式*/ padding-bottom:7px; clear:both; cursor:default } .hc_lnav .allbtn ul li .tx{ /*每个商品大分类的样式,*/ line-height:35px; background-color:#559b0d; padding-left:10px; background-repeat:no-repeat; height:35px; } .hc_lnav .allbtn ul li .tx a{ font-family:微软雅黑, 黑体; color: #e6f8e9;font-size:14px; } .hc_lnav .allbtn ul li .tx a i{ line-height:25px; /*选项旁边的图片*/ margin-top:5px; width:25px; float:left; height:25px; margin-right:10px; } /*div里面的小图片,像各地名优茶旁边的图*/ .hc_lnav .allbtn ul li.a1 .tx a i{background-image:url(http://img.php.cn/upload/course/000/000/006/5822dac38ab18673.png)} .hc_lnav .allbtn ul li.a2 .tx a i{background-image:url(http://img.php.cn/upload/course/000/000/006/5822dadc7f048889.png)} .hc_lnav .allbtn ul li.a3 .tx a i{background-image:url(http://img.php.cn/upload/course/000/000/006/5822daff1dc12522.png)} .hc_lnav .allbtn ul li.a4 .tx a i{background-image:url(http://img.php.cn/upload/course/000/000/006/5822db0c56bdf566.png)} .hc_lnav .allbtn ul li dl{ /*菜单下面最右侧的样式*/ zoom:1; color:#ffffff; clear:both; overflow:auto; padding-top:4px } .hc_lnav .allbtn ul li dl a{ /*菜单下面最左侧的样式*/ line-height:22px; float:left; color:#d9e7ce; margin-left:6px; margin-right:6px; } .hc_lnav .allbtn ul li dt{ /*最右侧的分类dt样式*/ padding-left:10px; width:30px; float:left; padding-top:1px } .hc_lnav .allbtn ul li dd{ /*最左侧的分类dt样式*/ line-height:22px; width:150px; float:left; padding-top:2px } /*二级导航隐藏*/ .hc_lnav .allbtn ul li .pop{ /*二级导航隐藏的样式*/ border-bottom:#599900 2px solid; position:absolute; border-left:medium none; background-color:#fcfcfc; min-height:466px; padding-left:5px; width:150px; padding-right:5px; display:none; height:686px; border-top:medium none; border-right:#599900 2px solid; padding-top:10px; left:190px; } .hc_lnav .allbtn ul li .pop dl:hover{ background-color:#f3f3f3 /*鼠标浏览二级隐藏域商品时的背景色*/ } .hc_lnav .allbtn ul li .pop dl a{ color:#666666; margin-left:12px; /*二级隐藏域商品链接a标签的样式*/ margin-right:12px } .hc_lnav .allbtn ul li .pop dt{ /*二级隐藏域最右侧的标签样式*/ padding-left:5px; width:72px; } .hc_lnav .allbtn ul li .pop dd{ /*二级隐藏域左侧的商品样式标签*/ width:150px; margin-left:-12px; } .hc_lnav .allbtn ul li .pop .act{ /*二级隐藏域下端的图片*/ width:150px; height:80px; overflow:hidden; padding-top:10px } .hc_lnav .allbtn:hover ul{ /*控制一级菜单显示隐藏*/ display:block } .hc_lnav .allbtn ul li:hover{ background-color:#fcfcfc /*鼠标停留一级隐藏域的背景色*/ } .hc_lnav .allbtn ul li:hover .tx{ /*鼠标停留一级隐藏域商品分类的的背景色*/ background-color:#f5f5f5 } .hc_lnav .allbtn ul li:hover .tx a{ /*当鼠标停留在另一个a标签上面的时候,上一个a标签的颜色*/ color:#333333 } .hc_lnav .allbtn ul li:hover .pop{ /*控制二级菜单显示隐藏*/ display:block; top:0px; left:190px } .hc_lnav .allbtn ul li:hover dl{ /*一级隐藏域和二级隐藏域最右侧的字体样式颜色*/ color:#6e6e6e } .hc_lnav .allbtn ul li:hover a{ color:#666666 } .hc_lnav .allbtn ul li:hover a:hover{ /*鼠标停留在商品上面的字体颜色*/ color:#cd0606 } </style> <body> <div class="hc_lnav"> <div class="allbtn"> <h2><a href="#"><strong> </strong>全部商品分类<i> </i></a></h2> <ul style="width:160px"> <li class=a1> <div class=tx><a href="#"><i> </i>各地名优茶</a> </div> <dl> <dt>热门</dt> <dd> <a href="#">西湖龙井</a> <a href="#">金骏眉</a> <a href="#">大红袍</a> <a href="#">铁观音</a> </dd> </dl> <dl> <dt>名茶</dt> <dd> <a href="#">红茶</a> <a href="#">绿茶</a> <a href="#">乌龙茶</a> <a href="#">黑茶</a> <a href="#">白茶 </a> </dd> </dl> <div class=pop> <h3><a href="#">各地名优茶</a></h3> <dl> <dl> <dt>绿茶</dt> <dd> <a class="" href="#">西湖龙井</a> <a class="" href="#">龙井</a> </dd> </dl> <dl> <dt>乌龙茶</dt> <dd> <a class="" href="">铁观音</a> <a class="" href="">大红袍</a> </dd> </dl> <dl> <dt>红茶</dt> <dd> <a class="" href="" >金骏眉</a> <a class="" href="">正山小种</a> </dd> </dl> <dl> <dt>黑茶</dt> <dd> <a class="" href="">白沙溪黑茶</a> <a class="" href="">普洱茶饼</a> </dd> </dl> <dl> <dt>白茶</dt> <dd> <a class="" href="#">白牡丹</a> <a class="" href="">白毫银针</a> </dd> </dl> </dl> <dl> <dt>品牌</dt> <dd> <a href="">滋恩</a> <a href="">远荣</a> </dd> </dl> <dl> <dt>价格</dt> <dd> <a href="">100元及以下</a> <a href="">100-300元</a> </dd> </dl> <dl> <dt>净含量</dt> <dd> <a href="" >50g及以下</a> <a href="">51-100g</a> </dd> </dl> <dl> <dt>包装</dt> <dd> <a href="">经济自饮装</a> <a href="" >精美礼品装</a> </dd> </dl> <div class=clr></div> <div class=act><a href=""><img src="http://img.php.cn/upload/course/000/000/006/5822e1629bbd5997.jpg" /></a> </div> </div> </li> </ul> </div> </div> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送