PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967
     | 积分获取 | 给我留言 | tag标签
    全站搜索
    关键字： jQuery特效 nginx jquery教程 图书分类 弹窗 下拉菜单 浏览器高度 $ajax
    您现在的位置： 首页 > 开发编程 > Jquery教程 > 正文

    jquery 仿淘宝商城左侧导航效果代码

    作者：admin来源：B5教程网浏览：次时间：2020-09-30 00:07:50我要评论
    导读：网络上很很多这种效果的js写法，但是还没有看见用jquery写的，效果实现很简单，确切的说是用jquery实现这个效果很简单，这就是jquery的强大...
    网络上很很多这种效果的js写法，但是还没有看见用jquery写的，效果实现很简单，确切的说是用jquery实现这个效果很简单，这就是jquery的强大和魅力所在。
     
     
    复制代码代码如下：
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4.         <meta http-equiv="content-type" content= "text/html; charset=utf-8">
    5.         <title>仿淘宝商城左侧导航效果t</title>
    6.         <script src="jquery-1.4.2.min.js" type="text/网页特效">
    7.         </script>
    8.         <style type="text/css教程">
    9.             * {
    10.                 margin: 0px;
    11.                 padding: 0px;
    12.             }
    13.            
    14.             ul{
    15.                 list-style: none;
    16.             }
    17.            
    18.             ul.nav li {
    19.                 cursor: pointer;
    20.                 width: 130px;
    21.                 height: 30px;
    22.                 text-align: center;
    23.                 border: 1px solid #a91319;
    24.                 line-height: 30px;
    25.                 margin: 4px auto;
    26.                 background: #fff8f6
    27.             }
    28.            
    29.             ul.nav li a {
    30.                 width: 130px;
    31.                 height: 30px;
    32.                 display: block;
    33.                 color: #a71f37;
    34.                 text-decoration: none;
    35.             }
    36.            
    37.             ul.nav li a:hover {
    38.                 background: #a91319;
    39.                 width: 130px;
    40.                 height: 30px;
    41.                 display: block;
    42.                 color: #ffffff
    43.             }
    44.            
    45.             div#showvalue {
    46.                 border: 3px solid #a91319; background:#ffffff; width:400px; height:auto; padding-bottom:10px;
    47.             }
    48.    ul.brand_list{ overflow:hidden; width:350px;}
    49.    ul.brand_list li{line-height:30px; height:auto;}
    50.    ul.brand_list li.brand_name{ font-weight:bolder; width:100px; float:left; margin-left:10px; color:#a71f37; margin-right:5px;}
    51.    ul.brand_list li.brand_content{ width:220px; float:right;}  
    52.    ul.brand_list li.brand_content a{color:#a71f37; text-decoration:none; }
    53.    ul.brand_list li.brand_content span{ padding:0 3px; border-left:1px solid #cccccc; font-size:14px;}
    54.   
    55.   
    56.   
    57.   
    58.         </style>
    59.     </head>
    60.     <body>
    61.         <div id='guid' style=" width:200px;">
    62.             <ul class="nav" style=" border:none;">
    63.                 <li>
    64.                     <a href="#">潮流服饰</a>
    65.                 </li>
    66.                 <li>
    67.                     <a href="#">精品鞋包</a>
    68.                 </li>
    69.                 <li>
    70.                     <a href="#">运动户外</a>
    71.                 </li>
    72.                 <li>
    73.                     <a href="#">手机数码</a>
    74.                 </li>
    75.                 <li>
    76.                     <a href="#">母婴用品</a>
    77.                 </li>
    78.             </ul>
    79.         </div>
    80.         <div id="hdvalue" style=" display:none; position:absolute; left:0px;">
    81.             <div>
    82.                <div class="con_st">
    83.                   <h3>品牌关键字1</h3>
    84.       <div>
    85.          <ul class="brand_list">
    86.           <li class="brand_name">大家电<b>></b></li>
    87.       <li class="brand_content">
    88.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    89.       </li>
    90.      
    91.          </ul>
    92.     
    93.       </div>
    94.                </div>
    95.             </div>
    96.   
    97.             <div>
    98.              <div class="con_st">
    99.                   <h3>品牌关键字2</h3>
    100.       <div>
    101.          <ul class="brand_list">
    102.           <li class="brand_name">大家电<b>></b></li>
    103.       <li class="brand_content">
    104.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    105.       </li>
    106.      
    107.          </ul>
    108.        <ul class="brand_list">
    109.           <li class="brand_name">大家电<b>></b></li>
    110.       <li class="brand_content">
    111.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    112.       </li>
    113.      
    114.          </ul>
    115.        <ul class="brand_list">
    116.           <li class="brand_name">大家电<b>></b></li>
    117.       <li class="brand_content">
    118.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    119.       </li>
    120.      
    121.          </ul>
    122.        <ul class="brand_list">
    123.           <li class="brand_name">大家电<b>></b></li>
    124.       <li class="brand_content">
    125.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    126.       </li>
    127.      
    128.          </ul>
    129.       </div>
    130.                </div>   
    131.    
    132.             </div>
    133.             <div>
    134.               <h3>品牌关键字3</h3>
    135.                <ul class="brand_list">
    136.           <li class="brand_name">大家电<b>></b></li>
    137.       <li class="brand_content">
    138.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    139.       </li>
    140.      
    141.          </ul>
    142.        <ul class="brand_list">
    143.           <li class="brand_name">大家电<b>></b></li>
    144.       <li class="brand_content">
    145.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    146.       </li>
    147.      
    148.          </ul>
    149.        <ul class="brand_list">
    150.           <li class="brand_name">大家电<b>></b></li>
    151.       <li class="brand_content">
    152.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    153.       </li>
    154.      
    155.          </ul>
    156.        <ul class="brand_list">
    157.           <li class="brand_name">大家电<b>></b></li>
    158.       <li class="brand_content">
    159.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    160.       </li>
    161.      
    162.          </ul>
    163.        <ul class="brand_list">
    164.           <li class="brand_name">大家电<b>></b></li>
    165.       <li class="brand_content">
    166.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    167.       </li>
    168.      
    169.          </ul>
    170.        <ul class="brand_list">
    171.           <li class="brand_name">大家电<b>></b></li>
    172.       <li class="brand_content">
    173.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    174.       </li>
    175.      
    176.          </ul>
    177.        <ul class="brand_list">
    178.           <li class="brand_name">大家电<b>></b></li>
    179.       <li class="brand_content">
    180.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    181.       </li>
    182.      
    183.          </ul>
    184.             </div>
    185.             <div>
    186.               <h3>品牌关键字4</h3>
    187.                <ul class="brand_list">
    188.           <li class="brand_name">大家电<b>></b></li>
    189.       <li class="brand_content">
    190.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    191.       </li>
    192.      
    193.          </ul>
    194.        <ul class="brand_list">
    195.           <li class="brand_name">大家电<b>></b></li>
    196.       <li class="brand_content">
    197.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    198.       </li>
    199.      
    200.          </ul>
    201.        <ul class="brand_list">
    202.           <li class="brand_name">大家电<b>></b></li>
    203.       <li class="brand_content">
    204.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    205.       </li>
    206.      
    207.          </ul>
    208.        <ul class="brand_list">
    209.           <li class="brand_name">大家电<b>></b></li>
    210.       <li class="brand_content">
    211.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    212.       </li>
    213.      
    214.          </ul>    
    215.       </div>
    216.             <div>
    217.               <h3>品牌关键字5</h3>
    218.               <ul class="brand_list">
    219.           <li class="brand_name">大家电<b>></b></li>
    220.       <li class="brand_content">
    221.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    222.       </li>
    223.      
    224.          </ul>
    225.        <ul class="brand_list">
    226.           <li class="brand_name">大家电<b>></b></li>
    227.       <li class="brand_content">
    228.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    229.       </li>
    230.      
    231.          </ul>
    232.        <ul class="brand_list">
    233.           <li class="brand_name">大家电<b>></b></li>
    234.       <li class="brand_content">
    235.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    236.       </li>
    237.      
    238.          </ul>
    239.        <ul class="brand_list">
    240.           <li class="brand_name">大家电<b>></b></li>
    241.       <li class="brand_content">
    242.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    243.       </li>
    244.      
    245.          </ul>
    246.        <ul class="brand_list">
    247.           <li class="brand_name">大家电<b>></b></li>
    248.       <li class="brand_content">
    249.        <span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span><span><a href="#">品牌</a></span>
    250.       </li>
    251.      
    252.          </ul>
    253.            </div>
    254.         </div>
    255.         <div id="showvalue" style=" z-index:22; display:none; position:fixed; top:-77px; left:130px; margin-left:20px; margin-top:100px;">
    256.         </div>
    257.         <script type="text/javascript">
    258.             $(document).ready(function(){//加载dom
    259.                 if (!$("#guid").is(":animated")) {//首先判断是否处于动画状态
    260.                     var lis = $("#guid ul.nav li");
    261.      //遍历文档树
    262.                     lis.each(function(i){
    263.                         $(this).bind("mouseo教程ver", i, function(){
    264.                             $("#showvalue").show();
    265.                             var hv = $("#hdvalue").children().eq(i);
    266.                             $("#showvalue").html(hv.html());
    267.                             $("#showvalue").bind("mouseover", function(){
    268.                                 $("#showvalue").show();
    269.                             })
    270.                         });
    271.                        
    272.                     });
    273.      //控制鼠标移除事件
    274.                     $("#guid,#showvalue").mouseleave(function(){
    275.                       
    276.                         $("#showvalue").hide();
    277.                     });                  
    278.                 }
    279.             });
    280.         </script>
    281.     </body>
    282. </html>

    转载请注明（B5教程网）原文链接：https://b5.mxunkeji.com/content-47-509-1.html
    相关热词搜索： 淘宝 左侧导航 菜单导航 二级菜单
    分享按钮
    上一篇：jQuery遍历JSON对象
    下一篇：jquery验证邮箱和手机号实例分享

    最新推荐

    关于我们

    关于我们

    赞助我们

    加入我们

    版权声明

    联系我们

    联系我们

    QQ技术群

    合作方式

    广告服务

    业务合作

    常见问题

    意见反馈

    网站地图

    在线投稿

    积分获取

    在线充值

    本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
    告知(634381967@qq.com)，我们会在第一时间处理！
    © 苏ICP备20040182号
    B5教程网 版权所有