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="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实现微博导航栏，需要的朋友可以来参考下。

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类