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

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

大家都知道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这个版本。

例如:

 

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

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

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

 

  1. <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浏览器等。

先来看看效果图:

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

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();
 
  })
 
})
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.csdn.net/weixin_44786530/article/details/90373663
目录
相关文章
|
8月前
|
JavaScript
jQuery 下拉菜单案例(透明+children+this)
jQuery 下拉菜单案例(透明+children+this)
47 0
|
7天前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
32 0
|
7天前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
58 0
|
6月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
34 0
|
8月前
|
JavaScript
jQuery 下拉菜单 添加动画
jQuery 下拉菜单 添加动画
57 0
|
JavaScript 前端开发
jQuery练习——下拉菜单
当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。
138 0
|
JavaScript
jQuery 实例
jQuery 实例
|
JavaScript
jquery品优购电梯导航4-74
jquery品优购电梯导航4-74
88 0
jquery品优购电梯导航4-74
|
JavaScript
jquery品优购电梯导航修复小bug并加上类名-73
jquery品优购电梯导航修复小bug并加上类名-73
76 0
jquery品优购电梯导航修复小bug并加上类名-73