脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php实例 → js代码微博导航栏

js代码实现微博导航栏

 更新时间：2015年07月30日 11:42:05   作者：dllling  
这篇文章主要介绍了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实现微博导航栏，需要的朋友可以来参考下。

您可能感兴趣的文章:

相关文章

  • thinkPHP批量删除的实现方法分析

    thinkPHP批量删除的实现方法分析

    这篇文章主要介绍了thinkPHP批量删除的实现方法,结合实例形式分析了thinkPHP实现批量删除数据的数据库及模板操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • 基于php+MySql实现学生信息管理系统实例

    基于php+MySql实现学生信息管理系统实例

    这篇文章主要介绍了基于php+MySql实现学生信息管理系统实例，文中通过图片功能介绍的非常详细，文章末尾附带项目源码，需要的朋友可以参考下
    2020-08-08
  • laravel按天、按小时,查询数据的实例

    laravel按天、按小时,查询数据的实例

    今天小编就为大家分享一篇laravel按天、按小时,查询数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • php的declare控制符和ticks教程(附示例)

    php的declare控制符和ticks教程(附示例)

    declare是PHP的流程控制结构，directive目前支持两个指令，ticks的使用需配合register_tick_function函数使用，看下面的小示例吧
    2014-03-03
  • PHP连接MYSQL数据库实例代码

    PHP连接MYSQL数据库实例代码

    现在做的项目需要php连接mysql数据库，虽然之前学过，但是现在基本上都给忘了，之后通过查找相关资料找到了解决方法，下面小编把具体方法分享在脚本之家平台供大家学习
    2016-01-01
  • Bootstrap+PHP实现多图上传功能实例详解

    Bootstrap+PHP实现多图上传功能实例详解

    这篇文章主要介绍了Bootstrap+PHP实现多图上传功能实例详解,本文图片加实例相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
    2018-04-04
  • md5 16位二进制与32位字符串相互转换示例

    md5 16位二进制与32位字符串相互转换示例

    密码很多时候都会用 md5保存,并且很多时候都是16位二进制格式的md5，php 里面 md5($str, true) 可以很方便的获取。更多时候md5结果是一组32个字符组成的字符串，其实转换很简单
    2013-12-12
  • PHP Curl出现403错误的解决办法

    PHP Curl出现403错误的解决办法

    这篇文章主要介绍了PHP Curl出现403错误的解决办法,是一个比较奇葩的错误,删除一些CURL的参数即可解决这个问题,需要的朋友可以参考下
    2014-05-05
  • php使用file_get_contents(‘php://input‘)和$_POST的区别实例对比

    php使用file_get_contents(‘php://input‘)和$_POST的区别实例对比

    这篇文章主要介绍了php使用file_get_contents(‘php://input‘)和$_POST的区别实例对比，这个知识点是比较常用的，有需要的可以参考下
    2021-03-03
  • php实现memcache缓存示例讲解

    php实现memcache缓存示例讲解

    共享内存是一种在相同机器中的应用程序之间交换数据的有效方式,本文说的是php实现memcache缓存示例，大家参考使用吧
    2013-12-12

最新评论