当前位置：首页 > PHP教程 > php应用 > 列表

js代码实现微博导航栏

发布:smiling　来源: PHP粉丝网 　添加日期：2021-06-14 23:22:52　浏览: 评论：0　

这篇文章主要介绍了js代码实现微博导航栏的相关资料,需要的朋友可以参考下，微博导航看起来很美观，实现起来也不麻烦，直接写代码了。

  1. <!DOCTYPE html> 
  2. <html> 
  3.    <head> 
  4.     <meta charset="utf-8" /> 
  5.     <title></title> 
  6.     <script type="text/javascript"> 
  7.       var hiddenChild = function(obj) { 
  8.           var ul = obj.getElementsByTagName("ul")[0]; 
  9.           ul.style.display = 'none'; 
  10.         } 
  11.         /* 
  12.          *obj表示导航条中的直接li 
  13.          */ 
  14.       var showChild = function(obj) { 
  15.         var ul = obj.getElementsByTagName("ul")[0]; 
  16.         ul.style.display = 'block'; 
  17.       } 
  18.     </script> 
  19.     <style type="text/css"> 
  20.       * { 
  21.         margin: 0px; 
  22.         padding: 0px 
  23.       } 
  24.       /*导航条*/ 
  25.        #nav { 
  26.         line-height: 60px; 
  27.         list-style-type: none; 
  28.         background-color: #0000FF; 
  29.         text-align: center; 
  30.       } 
  31.       #nav a { 
  32.         color: white; 
  33.         text-decoration: none; 
  34.         display: block; 
  35.         width: 80px; 
  36.         font-size: 20px; 
  37.         font-weight: 800; 
  38.       } 
  39.       #nav a:hover { 
  40.         background-color: #ccc; 
  41.       } 
  42.       #nav li { 
  43.         background-color: blue; 
  44.         float: left; 
  45.         color: white; 
  46.         list-style-type: none; 
  47.       } 
  48.       #nav li ul { 
  49.         position: absolute; 
  50.         display: none; 
  51.         width: 130px; 
  52.       } 
  53.       .show { 
  54.         display: block; 
  55.       } 
  56.     </style> 
  57.   </head> 
  58.    <body> 
  59.     <ul id="nav"> 
  60.       <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
  61.         <a href="#">首页</a> 
  62.         <ul> 
  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.          </ul> 
  73.        </li> 
  74.       <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
  75.         <a href="#">微频道</a> 
  76.         <ul> 
  77.           <li> 
  78.             <a href="#">微频道1</a> 
  79.           </li> 
  80.           <li> 
  81.             <a href="#">微频道2</a> 
  82.           </li> 
  83.          </ul> 
  84.       </li> 
  85.       <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
  86.         <a href="#">找人</a> 
  87.         <ul> 
  88.           <li> 
  89.             <a href="#">明星</a> 
  90.           </li> 
  91.           <li> 
  92.             <a href="#">达人</a> 
  93.           </li> 
  94.          </ul> 
  95.        </li> 
  96.       <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
  97.         <a href="#">微群</a> 
  98.         <ul> 
  99.           <li> 
  100.             <a href="#">股票</a> 
  101.           </li> 
  102.          </ul> 
  103.       </li> 
  104.      </ul> 
  105.   </body> 
  106.  </html> 

以上代码就是用js实现微博导航栏，需要的朋友可以来参考下。

Tags: js微博导航栏

分享到：

推荐文章

热门文章

最新评论文章