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 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现上传图片功能
Jun 29 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python web框架学习笔记
2016/05/03 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python新手如何理解循环加载模块
2020/05/29 Python
python如何写个俄罗斯方块
2020/11/06 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
给民警的表扬信
2014/01/08 职场文书
公司办公室岗位职责
2014/03/19 职场文书
年终晚会主持词
2014/03/25 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
小小商店教学反思
2014/04/27 职场文书
园林系毕业生求职信
2014/06/23 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript