快速实现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的图片懒加载js
Jun 30 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
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
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue 组件简介
2020/07/31 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python读写unicode文件的方法
2015/07/10 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers