导航首页 » 技术教程 » js代码实现微博导航栏
全站头部文字 我要出现在这里
js代码实现微博导航栏 399 2023-12-10   

微博导航看起来很美观,实现起来也不麻烦,直接写代码了

<!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="http://www.gimoo.net/t/1512/566e770269115.html">首页</a>
        <ul>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">全部广播</a>
          </li>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">好友</a>
          </li>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">关注</a>
          </li>
         </ul>
       </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="http://www.gimoo.net/t/1512/566e770269115.html">微频道</a>
        <ul>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">微频道1</a>
          </li>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">微频道2</a>
          </li>
         </ul>
      </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="http://www.gimoo.net/t/1512/566e770269115.html">找人</a>
        <ul>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">明星</a>
          </li>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">达人</a>
          </li>
         </ul>
       </li>
      <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
        <a href="http://www.gimoo.net/t/1512/566e770269115.html">微群</a>
        <ul>
          <li>
            <a href="http://www.gimoo.net/t/1512/566e770269115.html">股票</a>
          </li>
         </ul>
      </li>
     </ul>
  </body>
 </html>

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



!!!站长长期在线接!!!

网站、小程序:定制开发/二次开发/仿制开发等

各种疑难杂症解决/定制接口/定制采集等

站长微信:lxwl520520

站长QQ:1737366103