jquery实现二级导航下拉菜单效果实例


Posted in jQuery onMay 14, 2019

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单。

使用JQuery实现需要用到的知识有:

  1. 1)使用$(function(){...})获取到想要作用的HTML元素。
  2. 2)通过使用children()方法寻找子元素。
  3. 3)通过使用show()方法来显示HTML元素。
  4. 4)通过使用hide()方法来隐藏HTML元素。
  5. 5)jQuery库引用方法:

第一种方法:将jQuery库下载到电脑上,然后引用,我下载的是jquery-1.7.1.min.js这个版本。

例如: 

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

第二种方法:直接引用在线服务器上的jQuery库文件,比如谷歌服务器jQuery库,百度服务器jQuery库等。

例如:引用百度服务器上的jQuery库文件

<script type="text/javascript" src="jquery/1.9.0/jquery.js"></script>

接下来看看制作的流程:

  1. 1、调用jQuery库:编写代码,引用jquery库。由于谷歌已退出大陆,建议使用百度服务器的jQuery库。
  2. 注意: 百度服务器的jQuery库地址:http://libs.baidu.com/jquery/1.9.0/jquery.js
  3. 2 、编写显示子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用show()方法,显示二级菜单。
  4. 3、编写隐藏子菜单函数,使用$,并通过class名获取一级菜单li,过children()找到li的孩子元素ul,使用hide()方法, 隐藏二级菜单。
  5. 4、做浏览器兼容性测试,至少五个浏览器。IE7,8,9,火狐,谷歌,2345浏览器等。

先来看看效果图:

jquery实现二级导航下拉菜单效果实例

最后我们来看看代码的情况,和前面的区别不大:

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=gb2312" />

<title>下拉菜单</title>

<link
rel="stylesheet"
type="text/css"
href="style.css" rel="external nofollow" 
/>

<!--引用百度服务器的jQuery库-->

<script
src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script
type="text/javascript"
src="script.js"></script>

</head>

  

<body>

<div
id="nav"
class="nav">

  <ul>

    <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站首页</a></li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >课程大厅</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >JavaScript</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jQuery</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Ajax</a></li>

    </ul>

   </li>

   <li
class="navmenu"><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >学习中心</a>

    <ul>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >视频学习</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >案例学习</a></li>

     <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >交流平台</a></li>

    </ul>

   </li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >经典案例</a></li>

   <li><a
href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a></li>

  </ul>

</div>

</body>

</html>

CSS样式表外部style.css文件代码:

/*CSS全局设置*/

*{

 margin:0;

 padding:0;

}

.nav{

 background-color:#EEEEEE;

 height:40px;

 width:450px;

 margin:0
auto;

}

ul{

 list-style:none;

}

ul li{

 float:left;

 line-height:40px;

 text-align:center;

}

a{

 text-decoration:none;

 color:#000000;

 display:block;

 width:90px;

 height:40px;

}

a:hover{

 background-color:#666666;

 color:#FFFFFF;

}

ul li ul li{

 float:none;

 background-color:#EEEEEE;

}

ul li ul{

 display:none;

}

/*为了兼容IE7写的CSS样式,但是必须写在a:hover前面*/

ul li ul li a:link,ul li ul li a:visited{

 background-color:#EEEEEE;

}

ul li ul li a:hover{

 background-color:#009933;

}

JS脚本外部script,js文件代码:

$(function(){

  $(".navmenu").mouseover(function(){

   $(this).children("ul").show(); 

  })

   

  $(".navmenu").mouseout(function(){

   $(this).children("ul").hide();

  })

})

以上所述是小编给大家介绍的jquery二级导航下拉菜单详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
JQuery animate动画应用示例
May 14 #jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
You might like
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP pear安装配置教程
2016/05/14 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
javascript事件模型介绍
2016/05/31 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
jQuery给表格添加分页效果
2017/03/02 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js