快速实现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 相关文章推荐
js中的cookie的读写操作示例详解
Apr 17 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
JavaScript 基本概念
Jan 20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
详解vue 图片上传功能
Apr 30 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python机器学习之神经网络(一)
2017/12/20 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
护士实习鉴定范文
2013/12/22 职场文书
党员批评与自我批评
2014/02/12 职场文书
党员大会主持词
2014/04/02 职场文书
学习党章的体会
2014/11/07 职场文书
大学生个人学年总结
2015/02/15 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript