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递归调用与静态变量使用
Dec 16 PHP
Yii使用CLinkPager分页实例详解
Jul 23 PHP
php中使用sftp教程
Mar 30 PHP
php实现多城市切换特效
Aug 09 PHP
php微信公众平台开发之获取用户基本信息
Aug 17 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
Mar 01 PHP
再谈PHP中单双引号的区别详解
Jun 12 PHP
PHP开发制作一个简单的活动日程表Calendar
Jun 20 PHP
WordPress过滤垃圾评论的几种主要方法小结
Jul 11 PHP
Laravel中如何增加自定义全局函数详解
May 09 PHP
PHP创建单例后台进程的方法示例
May 23 PHP
php弹出提示框的是实例写法
Sep 26 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文件读写操作之文件写入代码
2011/01/13 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中switch语句用法详解
2015/08/17 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
详解Vue方法与事件
2017/03/09 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
浅谈Python里面小数点精度的控制
2018/07/16 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python多进程并行代码实例
2019/09/30 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python excel多行合并的方法
2020/12/09 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
企业文明单位申报材料
2014/05/16 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python