您现在的位置： 365建站网 > 365文章 > 用jquery实现的一个超级简单的下拉菜单

用jquery实现的一个超级简单的下拉菜单

文章来源：365jz.com     点击数：255    更新时间：2017-08-07 11:50   参与评论
用jquery实现的一个超级简单的下拉菜单。

效果图

初始效果
 
鼠标悬浮效果
 
代码
</>code
  1.  
  2. <!DOCTYPE html> 
  3. <html> 
  4. <head> 
  5. <script type="text/javascript" src="https://www.365jz.com/js/js/jquery-1.11.1.js"></script> 
  6. <style> 
  7. nav a { 
  8. text-decoration: none; 
  9. } 
  10. nav > ul > li { 
  11. float: left; 
  12. text-align: center; 
  13. padding: 0 0.5em; 
  14. } 
  15. nav li ul.sub-menu { 
  16. display: none; 
  17. padding-left: 0 !important; 
  18. } 
  19. .sub-menu li { 
  20. color: white; 
  21. } 
  22. .sub-menu li:hover { 
  23. background-color: black; 
  24. } 
  25. .sub-menu li:hover a { 
  26. color: white; 
  27. } 
  28. ul { 
  29. list-style: none; 
  30. } 
  31. </style> 
  32. </head> 
  33. <body> 
  34. <nav> 
  35. <ul> 
  36. <li><a href="#">Home 
  37. <ul class="sub-menu"> 
  38. <li><a href="#">sub1</a></li> 
  39. <li><a href="#">sub2</a></li> 
  40. <li><a href="#">sub3</a></li> 
  41. </ul> 
  42. </li> 
  43. <li><a href="#">Programming 
  44. <ul class="sub-menu"> 
  45. <li><a href="#">sub1</a></li> 
  46. <li><a href="#">sub2</a></li> 
  47. <li><a href="#">sub3</a></li> 
  48. </ul> 
  49. </li> 
  50. <li><a href="#">Japanese 
  51. <ul class="sub-menu"> 
  52. <li><a href="#">sub1</a></li> 
  53. <li><a href="#">sub2</a></li> 
  54. <li><a href="#">sub3</a></li> 
  55. </ul> 
  56. </li> 
  57. </ul> 
  58. </nav> 
  59. </body> 
  60. <script type="text/javascript"> 
  61. $(document).ready(function() { 
  62. $('nav li').hover(function() { 
  63. $(this).find('.sub-menu').css('display', 'block'); 
  64. }, function() { 
  65. $(this).find('.sub-menu').css('display', 'none'); 
  66. }); 
  67. }); 
  68. </script> 
  69. </html>

另外一个jQuery实现的导航下拉菜单效果。分享给大家供大家参考，具体如下：
</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>导航</title>
  7. <link rel="stylesheet" type="text/css" href="css/basic.css" />
  8. <style>
  9. .t-nav{ width:100%; height:50px; background:#124057;}
  10. .m-nav{ width:1000px; height:50px; margin:0 auto;}
  11. .ui-item{ width:99px; height:50px; line-height:50px; text-align:center; border-right:1px solid #103447;}
  12. .ui-menu{ width:119px; height:50px; line-height:50px; text-align:center; background:#168db8 url(img/menu_ico.gif) no-repeat 101px 23px; border-right:1px solid #0c769e; position:relative;}
  13. .ui-menu-cont{ width:119px; position:absolute; top:50px; left:0px; display:none;}
  14. .ui-menu-cont li{ width:119px; height:30px; line-height:30px; background:#168db8; border-top:1px solid #fff;}
  15. .ui-menu-cont li a{}
  16. .t-nav a{ color:#fff; font-size:14px;}
  17. .t-nav a:hover{ color:#fff; text-decoration:underline;}
  18. </style>
  19. </head>
  20. <body>
  21. <div class="t-nav" style="margin-top:20px;">
  22.   <ul class="m-nav">
  23.     <li class="g-fl ui-item"><a href="###">网站首页</a></li>
  24.     <li class="g-fl ui-item"><a href="###">导航内容</a></li>
  25.     <li class="g-fl ui-menu">
  26.       <a href="###">导航内容</a>
  27.       <ul class="ui-menu-cont">
  28.         <li><a href="###">列表内容</a></li>
  29.         <li><a href="###">列表内容</a></li>
  30.         <li><a href="###">列表内容</a></li>
  31.         <li><a href="###">列表内容</a></li>
  32.         <li><a href="###">列表内容</a></li>
  33.       </ul>
  34.     </li>
  35.     <li class="g-fl ui-menu">
  36.       <a href="###">导航内容</a>
  37.       <ul class="ui-menu-cont">
  38.         <li><a href="###">列表内容</a></li>
  39.         <li><a href="###">列表内容</a></li>
  40.         <li><a href="###">列表内容</a></li>
  41.         <li><a href="###">列表内容</a></li>
  42.         <li><a href="###">列表内容</a></li>
  43.       </ul>
  44.     </li>
  45.     <li class="g-fl ui-menu">
  46.       <a href="###">导航内容</a>
  47.       <ul class="ui-menu-cont">
  48.         <li><a href="###">列表内容</a></li>
  49.         <li><a href="###">列表内容</a></li>
  50.         <li><a href="###">列表内容</a></li>
  51.         <li><a href="###">列表内容</a></li>
  52.         <li><a href="###">列表内容</a></li>
  53.       </ul>
  54.     </li>
  55.     <li class="g-fl ui-menu">
  56.       <a href="###">导航内容</a>
  57.       <ul class="ui-menu-cont">
  58.         <li><a href="###">列表内容</a></li>
  59.         <li><a href="###">列表内容</a></li>
  60.         <li><a href="###">列表内容</a></li>
  61.         <li><a href="###">列表内容</a></li>
  62.         <li><a href="###">列表内容</a></li>
  63.       </ul>
  64.     </li>
  65.     <li class="g-fl ui-menu">
  66.       <a href="###">导航内容</a>
  67.       <ul class="ui-menu-cont">
  68.         <li><a href="###">列表内容</a></li>
  69.         <li><a href="###">列表内容</a></li>
  70.         <li><a href="###">列表内容</a></li>
  71.         <li><a href="###">列表内容</a></li>
  72.         <li><a href="###">列表内容</a></li>
  73.       </ul>
  74.     </li>
  75.     <li class="g-fl ui-item"><a href="###">导航内容</a></li>
  76.     <li class="g-fl ui-item"><a href="###">导航内容</a></li>
  77.   </ul>
  78. </div>
</>code
  1. <script type="text/javascript" src="https://www.365jz.com/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"> $(".ui-menu").hover(function() {   if($(this).find("li").length > 0){     $(this).children("ul").stop(true, true).slideDown(100)   } },function() {   $(this).children("ul").stop(true, true).slideUp("fast"); }); </script> </body> </html>

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (255人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号