欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js代碼實(shí)現(xiàn)微博導(dǎo)航欄

 更新時間：2015年07月30日 11:42:05   作者：dllling  
這篇文章主要介紹了js代碼實(shí)現(xiàn)微博導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下

微博導(dǎo)航看起來很美觀，實(shí)現(xiàn)起來也不麻煩，直接寫代碼了

<!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表示導(dǎo)航條中的直接li
         */
      var showChild = function(obj) {
        var ul = obj.getElementsByTagName("ul")[0];
        ul.style.display = 'block';
      }
    </script>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px
      }
      /*導(dǎo)航條*/
       #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="#">關(guān)注</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="#">達(dá)人</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實(shí)現(xiàn)微博導(dǎo)航欄，需要的朋友可以來參考下。

相關(guān)文章

  • 6種php上傳圖片重命名的方法實(shí)例

    6種php上傳圖片重命名的方法實(shí)例

    本文提供了6種php上傳圖片重命名的方法并對6種方法做了比較，肯定有一種合適你用的。
    2013-11-11
  • php微信公眾號開發(fā)之現(xiàn)金紅包

    php微信公眾號開發(fā)之現(xiàn)金紅包

    這篇文章主要為大家詳細(xì)介紹了php微信公眾號開發(fā)之現(xiàn)金紅包，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-04-04
  • Codeigniter控制器controller繼承問題實(shí)例分析

    Codeigniter控制器controller繼承問題實(shí)例分析

    這篇文章主要介紹了Codeigniter控制器controller繼承問題,以簡單實(shí)例形式分析了CodeIgniter中針對控制器controller繼承的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下
    2016-01-01
  • 一文帶你學(xué)會使用PHP接口

    一文帶你學(xué)會使用PHP接口

    PHP中的Interface是一種非常重要的特性，它允許開發(fā)人員定義一組規(guī)范或者約束，以確保類之間的互操作性和兼容性。在本文中，我們將詳細(xì)介紹PHP中的Interface的概念、定義、實(shí)現(xiàn)、使用、使用場景以及其它相關(guān)的一些知識點(diǎn)，需要的朋友可以參考下
    2023-04-04
  • Laravel 5框架學(xué)習(xí)之Eloquent （laravel 的ORM）

    Laravel 5框架學(xué)習(xí)之Eloquent （laravel 的ORM）

    Laravel 的 Eloquent ORM 提供了漂亮、簡潔的 ActiveRecord 實(shí)現(xiàn)來和數(shù)據(jù)庫的互動。 每個數(shù)據(jù)庫表會和一個對應(yīng)的「模型」互動。在開始之前，記得把 config/database.php 里的數(shù)據(jù)庫連接配置好。
    2015-04-04
  • ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能示例

    ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能示例

    這篇文章主要介紹了ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能,結(jié)合實(shí)例形式分析了ThinkPHP5使用富文本編輯器UEditor實(shí)現(xiàn)圖片上傳到阿里云的相關(guān)操作技巧,需要的朋友可以參考下
    2019-08-08
  • linux實(shí)現(xiàn)php定時執(zhí)行cron任務(wù)詳解

    linux實(shí)現(xiàn)php定時執(zhí)行cron任務(wù)詳解

    linux實(shí)現(xiàn)php定時執(zhí)行cron任務(wù)
    2013-12-12
  • php結(jié)合redis高并發(fā)下發(fā)帖、發(fā)微博的實(shí)現(xiàn)方法

    php結(jié)合redis高并發(fā)下發(fā)帖、發(fā)微博的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猵hp結(jié)合redis高并發(fā)下發(fā)帖、發(fā)微博的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • thinkPHP統(tǒng)計排行與分頁顯示功能示例

    thinkPHP統(tǒng)計排行與分頁顯示功能示例

    這篇文章主要介紹了thinkPHP統(tǒng)計排行與分頁顯示功能,結(jié)合實(shí)例形式分析了thinkPHP數(shù)據(jù)庫查詢與結(jié)果分頁顯示相關(guān)操作技巧,需要的朋友可以參考下
    2016-12-12
  • PHP常量DIRECTORY_SEPARATOR原理及用法解析

    PHP常量DIRECTORY_SEPARATOR原理及用法解析

    這篇文章主要介紹了PHP常量DIRECTORY_SEPARATOR原理及用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-11-11

最新評論