程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> js代碼實現微博導航欄,js微博導航欄

js代碼實現微博導航欄,js微博導航欄

編輯:關於PHP編程

js代碼實現微博導航欄,js微博導航欄


微博導航看起來很美觀,實現起來也不麻煩,直接寫代碼了

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      var hiddenChild = function(obj) {
          var ul = obj.getElementsByTagName("ul")[0];
          ul.style.display = 'none';
        }
        /*
         *obj表示導航條中的直接li
         */
      var showChild = function(obj) {
        var ul = obj.getElementsByTagName("ul")[0];
        ul.style.display = 'block';
      }
    </script>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px
      }
      /*導航條*/
       #nav {
        line-height: 60px;
        list-style-type: none;
        background-color: #0000FF;
        text-align: center;
      }
      #nav a {
        color: white;
        text-decoration: none;
        display: block;
        width: 80px;
        font-size: 20px;
        font-weight: 800;
      }
      #nav a:hover {
        background-color: #ccc;
      }
      #nav li {
        background-color: blue;
        float: left;
        color: white;
        list-style-type: none;
      }
      #nav li ul {
        position: absolute;
        display: none;
        width: 130px;
      }
      .show {
        display: block;
      }
    </style>
  </head>
   <body>
    <ul id="nav">
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="#">首頁</a>
        <ul>
          <li>
            <a href="#">全部廣播</a>
          </li>
          <li>
            <a href="#">好友</a>
          </li>
          <li>
            <a href="#">關注</a>
          </li>
         </ul>
       </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="#">微頻道</a>
        <ul>
          <li>
            <a href="#">微頻道1</a>
          </li>
          <li>
            <a href="#">微頻道2</a>
          </li>
         </ul>
      </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="#">找人</a>
        <ul>
          <li>
            <a href="#">明星</a>
          </li>
          <li>
            <a href="#">達人</a>
          </li>
         </ul>
       </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="#">微群</a>
        <ul>
          <li>
            <a href="#">股票</a>
          </li>
         </ul>
      </li>
     </ul>
  </body>
 </html>

以上代碼就是用js實現微博導航欄,需要的朋友可以來參考下。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved