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脚本中include文件出错解决方法
Nov 20 PHP
FireFox浏览器使用Javascript上传大文件
Oct 30 PHP
php获取参数的几种方法总结
Feb 18 PHP
开源php中文分词系统SCWS安装和使用实例
Apr 11 PHP
学习php设计模式 php实现建造者模式
Dec 07 PHP
基于PHP实现商品成交时发送短信功能
May 11 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
Aug 17 PHP
php获取当前url地址的方法小结
Jan 10 PHP
PHP中phar包的使用教程
Jun 14 PHP
使用php自动备份数据库表的实现方法
Jul 28 PHP
PHP实现普通hash分布式算法简单示例
Aug 06 PHP
PHP基础之输出缓冲区基本概念、原理分析
Jun 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
php学习 函数 课件
2008/06/15 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php实现的农历算法实例
2015/08/11 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
Python中的__slots__示例详解
2017/07/06 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
校园达人秀策划书
2014/01/12 职场文书
班级旅游计划书
2014/05/03 职场文书
倡议书范文格式
2014/05/12 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis