快速实现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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
jquery实现提示语淡入效果
May 05 jQuery
vue小图标favicon不显示的解决方案
Sep 19 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP新手入门学习方法
2011/05/08 PHP
header导出Excel应用示例
2014/01/24 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
jQuery设计思想
2017/03/07 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
python通过opencv实现批量剪切图片
2017/11/13 Python
Python SQLite3简介
2018/02/22 Python
python 日志增量抓取实现方法
2018/04/28 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
爱心倡议书范文
2014/05/12 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
国庆节活动总结
2014/08/26 职场文书
2014年党委工作总结
2014/11/22 职场文书
合作意向协议书
2015/01/29 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫