zoukankan      html  css  js  c++  java

  • 类似天猫那样的侧边导航栏的快速实现

    前几天在慕课上面看到一个教程，教人怎么做一个侧边导航栏，跟着教程于是自己用JQUERY也写出来了一个，贴上代码（HTML和JQUERY）给大家参考一下。

    [html] view plaincopy
     
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>地狗购物网网页导航效果</title>  
    6.     <link rel="stylesheet" href="css/style.css">  
    7. </head>  
    8. <body>  
    9.     <div id="menu">  
    10.         <ul>  
    11.             <li><a href="#item1" class="current">1F 男装</a></li>  
    12.             <li><a href="#item2">2F 女装</a></li>  
    13.             <li><a href="#item3">3F 美妆</a></li>  
    14.             <li><a href="#item4">4F 数码</a></li>  
    15.             <li><a href="#item5">5F 母婴</a></li>  
    16.         </ul>  
    17.     </div>  
    18.     <div id="content">  
    19.         <h1>滴狗狗无望</h1>  
    20.         <div id="item1" class="item">  
    21.             <h2>1F 男装</h2>  
    22.             <ul>  
    23.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    24.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    25.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    26.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    27.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    28.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    29.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    30.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    31.                 <li><a href="#"><img src="1F.jpg" alt=""></a></li>  
    32.             </ul>  
    33.         </div>  
    34.         <div id="item2" class="item">  
    35.             <h2>2F 女装</h2>  
    36.             <ul>  
    37.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    38.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    39.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    40.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    41.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    42.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    43.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    44.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    45.                 <li><a href="#"><img src="2F.jpg" alt=""></a></li>  
    46.             </ul>  
    47.         </div>  
    48.         <div id="item3" class="item">  
    49.             <h2>3F 美妆</h2>  
    50.             <ul>  
    51.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    52.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    53.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    54.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    55.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    56.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    57.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    58.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    59.                 <li><a href="#"><img src="3F.jpg" alt=""></a></li>  
    60.             </ul>  
    61.         </div>  
    62.         <div id="item4" class="item">  
    63.             <h2>4F 数码</h2>  
    64.             <ul>  
    65.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    66.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    67.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    68.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    69.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    70.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    71.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    72.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    73.                 <li><a href="#"><img src="4F.png" alt=""></a></li>  
    74.             </ul>  
    75.         </div>  
    76.         <div id="item5" class="item">  
    77.             <h2>5F 母婴</h2>  
    78.             <ul>  
    79.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    80.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    81.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    82.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    83.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    84.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    85.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    86.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    87.                 <li><a href="#"><img src="5F.jpg" alt=""></a></li>  
    88.             </ul>  
    89.         </div>  
    90.     </div>  
    91. </body>  
    92. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  
    93. <script>  
    94.     $(function(){  
    95.         $(window).scroll(function(){  
    96.             var top=$(document).scrollTop();  
    97.             var menu=$("#menu");  
    98.             var items=$("#content").find(".item");  
    99.   
    100.             var currentId="";//当前所在楼层item的ID  
    101.             items.each(function(){  
    102.                 var m=$(this);  
    103.                 var itemTop=m.offset().top;  
    104.                 //console.log(itemTop);  
    105.                 if(top>itemTop-200){  
    106.                     currentId="#"+m.attr("id");  
    107.                 }else{  
    108.                     return false;  
    109.                 }  
    110.             });  
    111.             //  
    112.             var currentLink=menu.find(".current");  
    113.             if(currentId && currentLink.attr("href") != currentId){  
    114.                 currentLink.removeClass("current");  
    115.                 menu.find("[href=" + currentId + "]").addClass("current");  
    116.             }  
    117.         });  
    118.     });  
    119. </script>  
    120. </html>  
  • 相关阅读:
    JSP页面间传递参数
    JSP获取当前日期时间
    jsp实现套打（发票打印）
    iframe
    HTTP状态码及含义大全
    标签 -- HTML内联框架
    jstl fmt标签详解
    button和submit的区别及使用js实现页面跳转的方式
    Idea SpringBoot 启动Eurka 报错，提示端口被占用
    CodeSmith 破解
  • 原文地址：https://www.cnblogs.com/danielweb/p/4361249.html
Copyright © 2011-2022 走看看