Js+CSS横向导航菜单

Biegral 2019/5/5 21:46:52 5288

效果图：
Js+CSS横向导航菜单


以下是源代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.         <meta http-equiv="Content-Language" content="zh-CN" />  
  6.         <title>横向下拉菜单</title>  
  7.         <style type="text/css">  
  8.         <!--   
  9.         * {margin:0;padding:0;border:0;}   
  10.         body {   
  11.          font-family: arial, 宋体, serif;   
  12.          font-size:12px;   
  13.         }   
  14.         #nav {   
  15.           height: 24px;     
  16.           list-style-type: none;     
  17.           padding-left:200px;    
  18.           line-height:24px;   
  19.           overflow:hidden;   
  20.           background:#999;   
  21.         }   
  22.         #nav a {   
  23.          display: block;    
  24.          width: 80px;    
  25.          text-align:center;   
  26.         }   
  27.         #nav a:link  {   
  28.          color:#EEE;    
  29.          text-decoration:none;   
  30.         }   
  31.         #nav a:visited  {   
  32.          color:#EEE;   
  33.          text-decoration:none;   
  34.         }   
  35.         #nav a:hover  {   
  36.          color:#FFF;   
  37.          text-decoration:none;   
  38.          font-weight:bold;   
  39.          background:#CCC;   
  40.         }   
  41.         #nav li {   
  42.          float: left;    
  43.          width: 80px;   
  44.         }   
  45.         #nav li ul {   
  46.          line-height: 24px;     
  47.          list-style-type: none;   
  48.          text-align:left;   
  49.          left: -999px;    
  50.          width: 520px; //注意,这里一定要设置宽度;   
  51.          position: absolute;   
  52.          background:#CCC;   
  53.         }   
  54.         #nav li ul li{   
  55.           float: left;   
  56.           width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float   
  57.         }   
  58.         #nav li ul a{   
  59.          display: block;    
  60.          width: 65px;   
  61.          text-align:left;   
  62.          padding-left:15px;   
  63.         }   
  64.         #nav li ul a:link  {   
  65.          color:#F1F1F1;    
  66.          text-decoration:none;   
  67.         }   
  68.         #nav li ul a:visited  {   
  69.          color:#F1F1F1;   
  70.          text-decoration:none;   
  71.         }   
  72.   
  73.         #nav li ul a:hover  {   
  74.          color:#FFF;   
  75.          text-decoration:none;   
  76.          font-weight:normal;   
  77.          background:#C00;   
  78.         }   
  79.         #nav li:hover ul {   
  80.          left:25%;   
  81.         }   
  82.         #nav li.sfhover ul {   
  83.          left:25%;   
  84.         }   
  85.         #content {   
  86.          clear: left;    
  87.         }   
  88.         -->  
  89.         </style>  
  90.   
  91.         <script type="text/javascript">  
  92.         <!--   
  93.         function menuFix() {   
  94.             var sfEls = document.getElementById("nav").getElementsByTagName("li");   
  95.             for (var i=0; i<sfEls.length; i++) {   
  96.                 sfEls[i].onmouseover=function() {   
  97.                     this.className+=(this.className.length>0? " ": "") + "sfhover";   
  98.                 }   
  99.                 sfEls[i].onMouseDown=function() {   
  100.                 this.className+=(this.className.length>0? " ": "") + "sfhover";   
  101.                 }   
  102.                 sfEls[i].onMouseUp=function() {   
  103.                     this.className+=(this.className.length>0? " ": "") + "sfhover";   
  104.                 }   
  105.                 sfEls[i].onmouseout=function() {   
  106.                     thisthis.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");   
  107.                 }   
  108.             }   
  109.         }   
  110.         window.onload=menuFix;   
  111.         //-->  
  112.         </script>  
  113.     </head>  
  114.     <body>  
  115.         <ul id="nav">  
  116.             <li>  
  117.                 <a href="#">菜单一</a>  
  118.                 <ul>  
  119.                     <li>  
  120.                         <a href="#">菜单11</a>  
  121.                     </li>  
  122.                     <li>  
  123.                         <a href="#">菜单12</a>  
  124.                     </li>  
  125.                     <li>  
  126.                         <a href="#">菜单13</a>  
  127.                     </li>  
  128.                     <li>  
  129.                         <a href="#">菜单14</a>  
  130.                     </li>  
  131.                     <li>  
  132.                         <a href="#">菜单15</a>  
  133.                     </li>  
  134.                     <li>  
  135.                         <a href="#">菜单16</a>  
  136.                     </li>  
  137.                     <li>  
  138.                         <a href="#">菜单17</a>  
  139.                     </li>  
  140.                     <li>  
  141.                         <a href="#">菜单18</a>  
  142.                     </li>  
  143.                     <li>  
  144.                         <a href="#">菜单19</a>  
  145.                     </li>  
  146.                 </ul>  
  147.             </li>  
  148.             <li>  
  149.                 <a href="#">菜单二</a>  
  150.                 <ul>  
  151.                     <li>  
  152.                         <a href="#">菜单21</a>  
  153.                     </li>  
  154.                     <li>  
  155.                         <a href="#">菜单22</a>  
  156.                     </li>  
  157.                     <li>  
  158.                         <a href="#">菜单23</a>  
  159.                     </li>  
  160.                     <li>  
  161.                         <a href="#">菜单24</a>  
  162.                     </li>  
  163.                     <li>  
  164.                         <a href="#">菜单25</a>  
  165.                     </li>  
  166.                     <li>  
  167.                         <a href="#">菜单26</a>  
  168.                     </li>  
  169.                     <li>  
  170.                         <a href="#">菜单27</a>  
  171.                     </li>  
  172.                     <li>  
  173.                         <a href="#">菜单28</a>  
  174.                     </li>  
  175.                     <li>  
  176.                         <a href="#">菜单29</a>  
  177.                     </li>  
  178.                 </ul>  
  179.             </li>  
  180.             <li>  
  181.                 <a href="#">菜单三</a>  
  182.                 <ul>  
  183.                     <li>  
  184.                         <a href="#">菜单31</a>  
  185.                     </li>  
  186.                     <li>  
  187.                         <a href="#">菜单32</a>  
  188.                     </li>  
  189.                     <li>  
  190.                         <a href="#">菜单33</a>  
  191.                     </li>  
  192.                     <li>  
  193.                         <a href="#">菜单34</a>  
  194.                     </li>  
  195.                     <li>  
  196.                         <a href="#">菜单35</a>  
  197.                     </li>  
  198.                     <li>  
  199.                         <a href="#">菜单36</a>  
  200.                     </li>  
  201.                     <li>  
  202.                         <a href="#">菜单37</a>  
  203.                     </li>  
  204.                     <li>  
  205.                         <a href="#">菜单38</a>  
  206.                     </li>  
  207.                     <li>  
  208.                         <a href="#">菜单39</a>  
  209.                     </li>  
  210.                 </ul>  
  211.             </li>  
  212.             <li>  
  213.                 <a href="#">菜单四</a>  
  214.                 <ul>  
  215.                     <li>  
  216.                         <a href="#">菜单41</a>  
  217.                     </li>  
  218.                     <li>  
  219.                         <a href="#">菜单42</a>  
  220.                     </li>  
  221.                     <li>  
  222.                         <a href="#">菜单43</a>  
  223.                     </li>  
  224.                     <li>  
  225.                         <a href="#">菜单44</a>  
  226.                     </li>  
  227.                     <li>  
  228.                         <a href="#">菜单45</a>  
  229.                     </li>  
  230.                     <li>  
  231.                         <a href="#">菜单46</a>  
  232.                     </li>  
  233.                     <li>  
  234.                         <a href="#">菜单47</a>  
  235.                     </li>  
  236.                     <li>  
  237.                         <a href="#">菜单48</a>  
  238.                     </li>  
  239.                 </ul>  
  240.             </li>  
  241.             <li>  
  242.                 <a href="#">菜单五</a>  
  243.                 <ul>  
  244.                     <li>  
  245.                         <a href="#">菜单51</a>  
  246.                     </li>  
  247.                     <li>  
  248.                         <a href="#">菜单51</a>  
  249.                     </li>  
  250.                     <li>  
  251.                         <a href="#">菜单53</a>  
  252.                     </li>  
  253.                     <li>  
  254.                         <a href="#">菜单54</a>  
  255.                     </li>  
  256.                     <li>  
  257.                         <a href="#">菜单55</a>  
  258.                     </li>  
  259.                     <li>  
  260.                         <a href="#">菜单56</a>  
  261.                     </li>  
  262.                     <li>  
  263.                         <a href="#">菜单57</a>  
  264.                     </li>  
  265.                     <li>  
  266.                         <a href="#">菜单58</a>  
  267.                     </li>  
  268.                 </ul>  
  269.             </li>  
  270.             <li>  
  271.                 <a href="#">菜单六</a>  
  272.                 <ul>  
  273.                     <li>  
  274.                         <a href="#">菜单61</a>  
  275.                     </li>  
  276.                     <li>  
  277.                         <a href="#">菜单62</a>  
  278.                     </li>  
  279.                     <li>  
  280.                         <a href="#">菜单63</a>  
  281.                     </li>  
  282.                     <li>  
  283.                         <a href="#">菜单64</a>  
  284.                     </li>  
  285.                     <li>  
  286.                         <a href="#">菜单65</a>  
  287.                     </li>  
  288.                 </ul>  
  289.             </li>  
  290.             <li>  
  291.                 <a href="#">菜单七</a>  
  292.                 <ul>  
  293.                     <li>  
  294.                         <a href="#">菜单71</a>  
  295.                     </li>  
  296.                     <li>  
  297.                         <a href="#">菜单72</a>  
  298.                     </li>  
  299.                     <li>  
  300.                         <a href="#">菜单73</a>  
  301.                     </li>  
  302.                     <li>  
  303.                         <a href="#">菜单74</a>  
  304.                     </li>  
  305.                     <li>  
  306.                         <a href="#">菜单75</a>  
  307.                     </li>  
  308.                 </ul>  
  309.             </li>  
  310.             <li>  
  311.                 <a href="#">菜单八</a>  
  312.                 <ul>  
  313.                     <li>  
  314.                         <a href="#">菜单81</a>  
  315.                     </li>  
  316.                     <li>  
  317.                         <a href="#">菜单82</a>  
  318.                     </li>  
  319.                     <li>  
  320.                         <a href="#">菜单83</a>  
  321.                     </li>  
  322.                     <li>  
  323.                         <a href="#">菜单84</a>  
  324.                     </li>  
  325.                     <li>  
  326.                         <a href="#">菜单85</a>  
  327.                     </li>  
  328.                 </ul>  
  329.             </li>  
  330.         </ul>  
  331.     </body>  
  332. </html>  
本文转载:CSDN博客

阅读排行

分类

归档