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

最新推荐文章于 2024-06-21 04:17:52 发布
最新推荐文章于 2024-06-21 04:17:52 发布
阅读量9.8k 收藏 16
点赞数 5
分类专栏： javascript JavaScript常用功能或效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37412958/article/details/78517808
版权

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

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

先来看看效果图：


最后我们来看看代码的情况，和前面的区别不大：
HTML代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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" />
<!--引用百度服务器的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 = "#" >网站首页</ a ></ li >
    < li class = "navmenu" >< a href = "#" >课程大厅</ a >
     < ul >
      < li >< a href = "#" >JavaScript</ a ></ li >
      < li >< a href = "#" >jQuery</ a ></ li >
      < li >< a href = "#" >Ajax</ a ></ li >
     </ ul >
    </ li >
    < li class = "navmenu" >< a href = "#" >学习中心</ a >
     < ul >
      < li >< a href = "#" >视频学习</ a ></ li >
      < li >< a href = "#" >案例学习</ a ></ li >
      < li >< a href = "#" >交流平台</ a ></ li >
     </ ul >
    </ li >
    < li >< a href = "#" >经典案例</ a ></ li >
    < li >< a href = "#" >关于我们</ a ></ li >
   </ ul >
</ div >
</ body >
</ html >

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*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文件代码：

?
1
2
3
4
5
6
7
8
9
$( function (){
   $( ".navmenu" ).mouseover( function (){
    $( this ).children( "ul" ).show(); 
   })
   
   $( ".navmenu" ).mouseout( function (){
    $( this ).children( "ul" ).hide();
   })
})
Alvin_扣扣953821815
关注
专栏目录
jQuery实现二级下拉菜单
LiRenxian0316的博客
07-08 1922
jQuery实现二级下拉菜单&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级下拉菜单&lt;/title&gt; &lt;style&gt; /* 公共样式 */ body,ul,li {
jq实现二级菜单/下拉菜单
deliefu3790的博客
06-22 794
https://www.cnblogs.com/sandraryan/ 不是很难，直接上代码~ 有写注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
最新发布
2401_85111725的博客
06-21 255
由于篇幅原因，就不多做展示了[外链图片转存中…(img-UbDU3PrN-1718914660727)][外链图片转存中…(img-xch8jBQv-1718914660728)][外链图片转存中…(img-CCQ2pESo-1718914660728)][外链图片转存中…(img-dtLMibY5-1718914660728)][外链图片转存中…(img-EUIaPI4t-1718914660729)][外链图片转存中…(img-QKVEDG1D-1718914660729)]
jQuery - 制作点击显示二级菜单效果
weixin_34384915的博客
03-24 241
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>制作子菜单</title> <script type="text/javascript" src="./js/jquery-1....
利用Jquery实现二级下拉菜单
yangpiaoluotianya的专栏
02-12 1014
最近在学习前端的内容：看到别人做的二级菜单挺好看的。下载别人的Demo看起来比较麻烦，所以就尝试了自己做一个简单二级下拉菜单： 效果图如下： 下拉菜单实现后的效果图： 没有做什么美化，只是从功能上实现下拉菜单 HTMLdai
JQuery 实现二级下拉菜单
asd135821jkl的专栏
03-12 1196
jQuery二级导航菜单     $(function () {         $('#nav li').mousemove(function () {             $(this).find('ul').slideDown("slow");         });         $('#nav li').mouseleave(function () {
jquery实现二级导航下拉菜单效果实例
10-17
主要介绍了jquery二级导航下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery实现简单的二级导航下拉菜单效果
11-24
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下： jQuery代码实现的二级导航菜单效果，非常简洁，喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级，CSS的配合也是挺重要的...
jQuery+css实现非常漂亮的水平导航菜单效果
10-21
主要介绍了jQuery+css实现非常漂亮的水平导航菜单效果,通过each方法遍历元素再使用removeClass与addClass变换页面元素样式实现导航菜单的切换效果,需要的朋友可以参考下
jquery实现的二级导航条
11-06
这是某次做项目时写的导航条，CSS为原创，兼容性不错，兼容IE7以上及chrome浏览器。
jquery实现多级下拉菜单
weixin_34353714的博客
09-29 328
支持多种浏览器，体验效果：http://keleyi.com/keleyi/phtml/jqmenu/4.htm多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码： 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh...
jquery实现简单二级菜单
WGS.
02-17 971
<div id="nav" class="nav"> <ul class="top_nav" id="top_nav">1 <a href="###"> <li>菜单一</li> </a> <a href="###"> ...
jquery导航菜单
style201904的博客
06-17 1677
*{ margin: 0; padding: 0; } ul{ width: 800px; overflow: hidden; background-color: #000000; position: relative; margin: 0 auto; } li{ position: relative; ...
jquery实现二级菜单下拉效果
had_meno的博客
10-21 1116
实现鼠标悬停菜单时，二级菜单下拉，代码如下所示： 无标题文档 /* reset */ body,ul { margin:0; padding:0; } li { list-style:none; } a { text-decoration:none; } /* layout */ .nav { width:140px; } .nav li { } .nav
jquery二级联动下拉菜单
qq_38938763的博客
06-15 2563
二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 先看下效果 大类：   前端技术   程序开发   数据库   小类： 实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery把值传给后台PHP处理，PHP通过查
jQuery实战：实现二级导航下拉菜单教程
本文档主要介绍了如何使用jQuery框架实现一个二级导航下拉菜单的效果。jQuery作为JavaScript的封装工具，简化了前端开发者的操作，使得处理DOM元素更加便捷。以下是实现该效果的关键知识点： 1. **jQuery基本用法**...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值