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 smarty的预保留变量总结
Dec 04 PHP
php cookie 作用范围?不要在当前页面使用你的cookie
Mar 24 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
Jun 03 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
Nov 19 PHP
PHP使用NuSOAP调用Web服务的方法
Jul 18 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
Feb 15 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
Apr 07 PHP
PHP模板引擎Smarty内建函数详解
Apr 11 PHP
Yii遍历行下每列数据的方法
Oct 17 PHP
详解Yii2.0使用AR联表查询实例
Jun 16 PHP
Laravel学习教程之model validation的使用示例
Oct 23 PHP
PHP实现的折半查找算法示例
Dec 19 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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP 高手之路(三)
2006/10/09 PHP
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python设置环境变量的作用整理
2020/02/17 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
分享一个python的aes加密代码
2020/12/22 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
学校节能减排倡议书
2014/05/16 职场文书
求职教师自荐书
2014/06/19 职场文书
升职自我推荐信范文
2015/03/25 职场文书
运动会主持词大全
2015/07/02 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
《法国号》教学反思
2016/02/22 职场文书
安全责任协议书范本
2016/03/23 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
vue实现简单数据双向绑定
2021/04/28 Vue.js
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android