js代码实现微博导航栏


Posted in PHP onJuly 30, 2015

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

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

PHP 相关文章推荐
PHP中动态HTML的输出技术
Oct 09 PHP
如何跨站抓取别的站点的页面的补充
Oct 09 PHP
php获取某个目录大小的代码
Sep 10 PHP
php+mysql 实现身份验证代码
Mar 24 PHP
php cookies中删除的一般赋值方法
May 07 PHP
浅析php与数据库代码开发规范
Aug 08 PHP
php json_encode值中大括号与花括号区别
Sep 30 PHP
php防止SQL注入详解及防范
Nov 12 PHP
ThinkPHP 3.2 数据分页代码分享
Oct 14 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
Dec 07 PHP
laravel-admin 实现在指定的相册下添加照片
Oct 21 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
Aug 24 PHP
两种php给图片加水印的实现代码
Apr 18 #PHP
php简单生成随机数的方法
Jul 30 #PHP
php简单判断文本编码的方法
Jul 30 #PHP
php实现的数字验证码及数字运算验证码
Jul 30 #PHP
Thinkphp+smarty+uploadify实现无刷新上传
Jul 30 #PHP
PHP实现批量修改文件后缀名的方法
Jul 30 #PHP
PHP实现抓取迅雷VIP账号的方法
Jul 30 #PHP
You might like
关于php fread()使用技巧
2010/01/22 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
json跟xml的对比分析
2008/06/10 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
VUE脚手架具体使用方法
2019/05/20 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
如何基于Python实现数字类型转换
2020/02/07 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
求职信名称怎么写
2014/05/26 职场文书
社团活动总结书
2014/06/27 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
看上去很美观后感
2015/06/10 职场文书