jquery下拉导航菜单(扩展很方便)

简介:

js下拉菜单导航(很适合扩展)

 

 

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
  6. <script type="text/javascript"> 
  7. <!-- 
  8. var timeout         = 500
  9. var closetimer      = 0
  10. var ddmenuitem      = 0
  11.  
  12. function jsddm_open(){ 
  13.     jsddm_canceltimer(); 
  14.     jsddm_close(); 
  15.     ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} 
  16.  
  17. function jsddm_close(){ 
  18.     if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 
  19.  
  20. function jsddm_timer(){ 
  21.     closetimer = window.setTimeout(jsddm_close, timeout);} 
  22.  
  23. function jsddm_canceltimer(){ 
  24.     if(closetimer) 
  25.     {   window.clearTimeout(closetimer); 
  26.         closetimer = null;}} 
  27.  
  28. $(document).ready(function(){ 
  29.     $('#jsddm > li').bind('mouseover', jsddm_open); 
  30.     $('#jsddm > li').bind('mouseout',  jsddm_timer);}); 
  31.  
  32. document.onclick = jsddm_close
  33. //--> 
  34. </script> 
  35.  
  36. <style> 
  37. <!-- 
  38. #jsddm{ 
  39.     margin: 0; 
  40.     padding: 0 
  41. #jsddm li{ 
  42.     float: left; 
  43.     list-style: none; 
  44.     font: 12px Tahoma, Arial 
  45. #jsddm li a{ 
  46.     display: block; 
  47.     background: #324143; 
  48.     padding: 5px 12px; 
  49.     text-decoration: none; 
  50.     border-right: 1px solid white; 
  51.     width: 70px; 
  52.     color: #EAFFED; 
  53.     white-space: nowrap 
  54. #jsddm li a:hover{ 
  55.     background: #24313C 
  56. #jsddm li ul{ 
  57.     margin: 0; 
  58.     padding: 0; 
  59.     position: absolute; 
  60.     visibility: hidden; 
  61.     border-top: 1px solid white 
  62. #jsddm li ul li{ 
  63.     float: none; 
  64.     display: inline 
  65. }        
  66. #jsddm li ul li a{ 
  67.     width: auto; 
  68.     background: #A9C251; 
  69.     color: #24313C 
  70. }    
  71. #jsddm li ul li a:hover{ 
  72.     background: #8EA344 
  73. --> 
  74. </style> 
  75. </head> 
  76.  
  77. <body> 
  78. <ul id="jsddm"> 
  79.     <li><a href="#">JavaScript</a> 
  80.         <ul> 
  81.             <li><a href="#">Drop Down Menu</a></li> 
  82.             <li><a href="#">jQuery Plugin</a></li> 
  83.             <li><a href="#">Ajax Navigation</a></li> 
  84.         </ul> 
  85.     </li> 
  86.     <li><a href="#">Effect</a> 
  87.         <ul> 
  88.             <li> 
  89.                 <table border="1" width="500"> 
  90.                     <tr> 
  91.                         <td><a href="#">Slide Effect</a><a href="#">Slide Effect</a><a href="#">Slide Effect</a></td> 
  92.                         <td><a href="#">Slide Effect</a><a href="#">Slide Effect</a><a href="#">Slide Effect</a></td> 
  93.                     </tr> 
  94.                 </table> 
  95.             </li> 
  96.             <li><a href="#">Fade Effect</a></li> 
  97.             <li><a href="#">Opacity Mode</a></li> 
  98.             <li><a href="#">Drop Shadow</a></li> 
  99.             <li><a href="#">Semitransparent</a></li> 
  100.         </ul> 
  101.     </li> 
  102.     <li><a href="#">Navigation</a> 
  103.         <ul> 
  104.             <li><a href="#">Slide Effect</a></li> 
  105.             <li><a href="#">Fade Effect</a></li> 
  106.             <li><a href="#">Opacity Mode</a></li> 
  107.             <li><a href="#">Drop Shadow</a></li> 
  108.         </ul> 
  109.     </li> 
  110.     <li><a href="#">HTML/CSS</a> 
  111.         <ul> 
  112.             <li><a href="#">Slide Effect</a></li> 
  113.             <li><a href="#">Opacity Mode</a></li> 
  114.             <li><a href="#">Drop Shadow</a></li> 
  115.         </ul> 
  116.     </li> 
  117.     <li><a href="http://xuqin.blog.51cto.com/">PHP</a></li> 
  118. </ul> 
  119. </body> 
  120. </html> 

 




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1028509,如需转载请自行联系原作者





相关文章
|
1月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
19 0
|
5月前
|
JavaScript 前端开发
jquery导航选中按钮颜色变化
jquery导航选中按钮颜色变化
30 0
|
JavaScript
Layui模块化,改造传统jquery扩展为layui模块
在我使用jquery扩展,拖拽组件的时候,因为使用的布局模板有些冲突,导致无法使用扩展,所以才会解决之后写下这篇文章。 Layui中内置了jquery 只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的和jQuery。这是layui文档中的描述,它内置了jq,但是去除了全局的和jQuery对象,也就是在window的全局对外接口被删除了。 拖拽组件的实现 假设siam.js是一个扩展,里面提供了一个类似这样的方法
275 0
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
112 0
【JQuery】扩展BootStrap入门——知识点讲解(一)
|
前端开发 JavaScript iOS开发
【JQuery】扩展BootStrap入门——知识点讲解(二)
本期主要介绍扩展BootStrap入门——知识点讲解(二)
103 0
【JQuery】扩展BootStrap入门——知识点讲解(二)
|
JavaScript
jquery品优购电梯导航4-74
jquery品优购电梯导航4-74
88 0
jquery品优购电梯导航4-74
|
JavaScript
jquery品优购电梯导航修复小bug并加上类名-73
jquery品优购电梯导航修复小bug并加上类名-73
74 0
jquery品优购电梯导航修复小bug并加上类名-73
|
JavaScript
jquery品优购电梯导航2-72
jquery品优购电梯导航2-72
129 0
jquery品优购电梯导航2-72
jquery-品优购电梯导航-71
jquery-品优购电梯导航-71
86 0
jquery-品优购电梯导航-71
|
JavaScript
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
505 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果