快速实现jQuery多级菜单效果


Posted in Javascript onFebruary 01, 2017

利用js或者jquery最快速实现导航条的多级菜单效果。

我这个代码用的是jquery1.9.1,ie8以下的兼容有待考虑,主要是代码的简介性,write less,do more.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
  <title></title>
  <style type="text/css">
    .top-nav
    {
      font-size: 12px;
      font-weight: bold;
      list-style: none;
    }
    .top-nav li
    {
      float: left;
      list-style: none;
      margin-right: 1px;
    }
    .top-nav li a
    {
      line-height: 20px;
      text-decoration: none;
      background: #DDDDDD;
      color: #666666;
      display: block;
      width: 80px;
      text-align: center;
    }
    .top-nav li a:hover
    {
      background: #900;
      color: #FFF;
    }
    .top-nav ul
    {
      list-style: none;
      display: none;
      width: 80px;
      padding: 0;
      position: relative;
    }
    .top-nav li ul li ul
    {
      position: absolute;
      top: 0;
      left: 80px;
    }
  </style>
</head>
<body>
  <ul class="top-nav">
    <li><a href="#">首页内容</a>
      <ul>
        <li><a href="#">前端课程 +</a>
          <ul>
            <li><a href="#">javascript</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">jquery</a></li>
          </ul>
        </li>
        <li><a href="#">手机开发</a>
          <ul>
            <li><a href="#">ios开发</a></li>
            <li><a href="#">android开发</a></li>
            <li><a href="#">WP开发</a></li>
          </ul>
        </li>
        <li><a href="#">后台编程</a></li>
      </ul>
    </li>
    <li><a href="#">课程大厅</a> </li>
    <li><a href="#">学习中心 +</a>
      <ul>
        <li><a href="#">前端课程 +</a>
          <ul>
            <li><a href="#">javascript</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">jquery</a></li>
          </ul>
        </li>
        <li><a href="#">手机开发</a>
          <ul>
            <li><a href="#">ios开发</a></li>
            <li><a href="#">android开发</a></li>
            <li><a href="#">WP开发</a></li>
          </ul>
        </li>
        <li><a href="#">后台编程</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
    </script>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
   $(function(){
    $(".top-nav li").hover(function(){
      $(this).has("ul").children("ul").fadeIn();
    },function(){
      $(this).has("ul").children("ul").hide();
    });
   }) 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
js获取内联样式的方法
Jan 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
Javascript基础回顾之(二) js作用域
Jan 31 #Javascript
Javascript基础回顾之(一) 类型
Jan 31 #Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
ECMAScript6--解构
2017/03/30 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python 实现链表实例代码
2017/04/07 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
经济国贸专业求职信
2014/06/18 职场文书
员工工作心得体会
2019/05/07 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python