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读取xml实例代码
Jan 28 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
Oct 29 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
Jun 01 PHP
浅析is_writable的php实现
Jun 18 PHP
PHP CodeIgniter框架的工作原理研究
Mar 30 PHP
php通过curl模拟登陆DZ论坛
May 11 PHP
PHP文件缓存smarty模板应用实例分析
Feb 26 PHP
YII Framework框架教程之国际化实现方法
Mar 14 PHP
PHP PDOStatement::debugDumpParams讲解
Jan 30 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
Mar 22 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
Apr 23 PHP
php判断/计算闰年的方法小结【三种方法】
Jul 06 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.MVC的模板标签系统(五)
2006/09/05 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Vue基础配置讲解
2019/11/29 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
党校培训思想汇报
2014/01/03 职场文书
高中体育教学反思
2014/01/24 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
财务内勤岗位职责
2014/04/17 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP