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 实现图片的依次加载图片功能
Jul 06 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue-cli 首屏加载优化问题
2018/11/06 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Windows下安装Scrapy
2018/10/17 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
详解python数据结构和算法
2019/04/18 Python
python三大神器之fabric使用教程
2019/06/10 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Pandas的数据过滤实现
2021/01/15 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
华为慧通笔试题
2016/04/22 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
工作岗位职责范本
2015/02/15 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书