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

大家都知道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代码：

<!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" />

< 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文件代码：

/*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是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
jquery二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果大类: 前端技术 ...
php下拉菜单指示图标如何添加,jquery实现很酷的网页顶部图标下拉菜单效果
本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实 ...
jquery实现导航下拉菜单
jquery实现导航下拉菜单原生的: 用layui 原生的: html <div id="my_menu" class="sdmenu">< ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...

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

jquery实现二级导航下拉菜单效果相关推荐

最新文章

热门文章