jQuery仿苏宁易购导航

时间：2023-03-09 18:09:46
jQuery仿苏宁易购导航

最近看了些网上的各类导航网站源码，自己学习制作了一个仿苏宁易购的导航栏

jQuery部分代码

 $(function(){

     $(".CategoryTree>ul>li").hover(function(index){

         var obj=$(this).offset();

         var xobj=obj.left+240+"px";

         var yobj=$(this).index()*(-$(this).height()-1)+"px";

         $(this).addClass("selected");

         $(this).children("e:eq(0)").addClass("h2-tit");

         $(this).css("background","#856F62").siblings().css("background","#FFFFFF");

         $(this).children(".tit").children("p").css("color","white");

         $(this).children(".content").css({"left":xobj,"top":yobj}).show();

     },function(){

         $(this).removeClass("selected");

         $(this).children(".tit").removeClass("h2-tit");

         $(this).children(".tit").children("p").css("color","#999");

         $(this).children(".tit").children("span").css("color","black");

         $(this).children(".content").hide();

     })

 })

Css部分代码

 .ColLeft { width:241px;background:#fff;padding:;margin:;}

 .CategoryTree{ border:1px solid #ccc;height:482px;}

 .CategoryTree .titlebar { width:240px;height:30px;background-color:rgb(255,138,21);}

 .CategoryTree .titlebar h3{margin:;padding:;line-height:30px;font-size:"宋体";font-size:16px;font-weight:bold;letter-spacing:0.1em;color:#FFF;margin-left:15px;}

 .CategoryTree ul{padding:;width:240px;height:auto;}

 .CategoryTree ul li { height:50px; padding:0 10px; position:relative;vertical-align:middle; cursor:pointer;z-index:;display:block;font-family:"宋体";font-size:12px;letter-spacing:0.1em;border-bottom:1px #e4e4e4 solid;}

 .CategoryTree ul li .tit{display:block;margin-left:5px;padding-top:5px;color:#999;}

 .CategoryTree ul li .tit span{ font-weight:bold;color:#000;}

 .CategoryTree ul li .content{ position:absolute;width:700px;height:457px;background:#fff;border:1px solid #e6e6e6;display:none;z-index:;margin-left:-1px;}

 .CategoryTree ul li .content .cleft{ width:500px;height:457px; float:left;}

 .CategoryTree ul li .content .cright{ width:190px;height:457px; float:right;}

 .CategoryTree ul li.selected{z-index:; position:relative; }

 .CategoryTree ul li.selected .h2-tit{position:absolute; z-index:;background:#fff;border:1px #666 solid; border-bottom:3px #666 solid; border-right:;width:170px;height:24px;line-height:24px; padding-left:2px;margin-left:-4px;}

HTML部分代码

 <div class="main">

         <div class="ColLeft">

             <div class="CategoryTree">

                 <div class="titlebar"><h3>全部商品分类</h3></div>

                 <ul>

                     <li>

                         <a  class="tit"><p><span>手机　相机　电脑</span><br />合约机　笔记本　单反　DIY　微单</p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>办公　影音　配件</span><br />路由器　存储卡　打印　耳机　U盘<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>家用电器　小家电</span><br />电视　冰箱　洗衣机　空调　取暖器<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>母婴　玩具</span><br />奶粉　纸尿裤　喂养　辅食　玩具<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>护肤　洗护</span><br />洁面　护肤　彩妆　洗发　沐浴<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>服装馆　箱包　汽车用品</span><br />男装　男包　钟表　珠宝　运动户外<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>居家　美食</span><br />家纺　家装建材　厨具　酒水　清洁<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>图书　电子书</span><br />教育　历史　育儿　小说　儿童书<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                     <li>

                         <a  class="tit"><p><span>游戏　充值　旅行　彩票</span><br />保险　酒店　生活缴费　礼品卡<p></a>

                         <div class="content">

                             <div class="cleft"></div>

                             <div class="cright"></div>

                         </div>

                     </li>

                 </ul>

             </div>

         </div>

相关文章