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导出oracle库的php代码
Apr 20 PHP
php学习之 认清变量的作用范围
Jan 26 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
Jan 06 PHP
PHP对象相互引用的内存溢出实例分析
Aug 28 PHP
PHP中的静态变量及static静态变量使用详解
Nov 05 PHP
php采用session实现防止页面重复刷新
Dec 24 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
May 03 PHP
php魔法函数与魔法常量使用介绍
Jul 23 PHP
2017年最好用的9个php开发工具推荐(超好用)
Oct 23 PHP
swoole和websocket简单聊天室开发
Nov 18 PHP
php curl优化下载微信头像的方法总结
Sep 07 PHP
laravel实现上传图片并在页面显示的例子
Oct 14 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP加密解密函数详解
2015/10/28 PHP
php的扩展写法总结
2019/05/14 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
《风筝》教学反思
2014/04/10 职场文书
篝火晚会策划方案
2014/05/16 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
婚姻出轨保证书
2015/05/08 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL