您的位置：首页 > Web前端 > JQuery

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

2019-05-20 14:01 1866 查看

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

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5.  
  6. <head>
  7.  
  8. <meta
  9. http-equiv="Content-Type"
  10. content="text/html; charset=gb2312" />
  11.  
  12. <title>下拉菜单</title>
  13.  
  14. <link
  15. rel="stylesheet"
  16. type="text/css"
  17. href="style.css" rel="external nofollow"
  18. />
  19.  
  20. <!--引用百度服务器的jQuery库-->
  21.  
  22. <script
  23. src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  24.  
  25. <script
  26. type="text/javascript"
  27. src="script.js"></script>
  28.  
  29. </head>
  30.  
  31.   
  32.  
  33. <body>
  34.  
  35. <div
  36. id="nav"
  37. class="nav">
  38.  
  39.   <ul>
  40.  
  41.     <li><a
  42. 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>
  43.  
  44.    <li
  45. class="navmenu"><a
  46. 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>
  47.  
  48.     <ul>
  49.  
  50.      <li><a
  51. 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>
  52.  
  53.      <li><a
  54. 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>
  55.  
  56.      <li><a
  57. 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>
  58.  
  59.     </ul>
  60.  
  61.    </li>
  62.  
  63.    <li
  64. class="navmenu"><a
  65. 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>
  66.  
  67.     <ul>
  68.  
  69.      <li><a
  70. 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>
  71.  
  72.      <li><a
  73. 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>
  74.  
  75.      <li><a
  76. 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>
  77.  
  78.     </ul>
  79.  
  80.    </li>
  81.  
  82.    <li><a
  83. 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>
  84.  
  85.    <li><a
  86. 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>
  87.  
  88.   </ul>
  89.  
  90. </div>
  91.  
  92. </body>
  93.  
  94. </html>

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

 
  1. /*CSS全局设置*/
  2.  
  3. *{
  4.  
  5.  margin:0;
  6.  
  7.  padding:0;
  8.  
  9. }
  10.  
  11. .nav{
  12.  
  13.  background-color:#EEEEEE;
  14.  
  15.  height:40px;
  16.  
  17.  width:450px;
  18.  
  19.  margin:0
  20. auto;
  21.  
  22. }
  23.  
  24. ul{
  25.  
  26.  list-style:none;
  27.  
  28. }
  29.  
  30. ul li{
  31.  
  32.  float:left;
  33.  
  34.  line-height:40px;
  35.  
  36.  text-align:center;
  37.  
  38. }
  39.  
  40. a{
  41.  
  42.  text-decoration:none;
  43.  
  44.  color:#000000;
  45.  
  46.  display:block;
  47.  
  48.  width:90px;
  49.  
  50.  height:40px;
  51.  
  52. }
  53.  
  54. a:hover{
  55.  
  56.  background-color:#666666;
  57.  
  58.  color:#FFFFFF;
  59.  
  60. }
  61.  
  62. ul li ul li{
  63.  
  64.  float:none;
  65.  
  66.  background-color:#EEEEEE;
  67.  
  68. }
  69.  
  70. ul li ul{
  71.  
  72.  display:none;
  73.  
  74. }
  75.  
  76. /*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/
  77.  
  78. ul li ul li a:link,ul li ul li a:visited{
  79.  
  80.  background-color:#EEEEEE;
  81.  
  82. }
  83.  
  84. ul li ul li a:hover{
  85.  
  86.  background-color:#009933;
  87.  
  88. }

JS脚本外部script,js文件代码：

 
  1. $(function(){
  2.  
  3.   $(".navmenu").mouseover(function(){
  4.  
  5.    $(this).children("ul").show(); 
  6.  
  7.   })
  8.  
  9.    
  10.  
  11.   $(".navmenu").mouseout(function(){
  12.  
  13.    $(this).children("ul").hide();
  14.  
  15.   })
  16.  
  17. })
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航