导航菜单

jQuery/CSS3飘带式下拉菜单

阿里云


今天我们再来介绍一款 jQuery 下拉菜单,这款 jQuery 下拉菜单应用了一些 CSS3 相关的属性,但并不复杂,也没有绚丽的动画,但是非常实用。这款 jQuery 菜单的另一个特点是菜单整体呈飘带状,样式非常新颖。鼠标滑过菜单项时即可展开下拉菜单。下面一起来看看这款菜单的实现过程和源代码,代码主要由 HTML、CSS 和 jQuery 组成。

HTML 代码:

  1. <div id="menu-holder">
  2.        <div>
  3. <ul class="menu">
  4. <li><a href="http://www.flashuser.net">Home</a></li>
  5. <li><a href="#">Dropdown</a>
  6. <ul>
  7. <li><a href="http://www.flashuser.net/category/css">CSS</a></li>
  8. <li><a href="http://www.flashuser.net/category/tutorials">Tutorials</a></li>
  9. <li><a href="http://www.flashuser.net/category/photoshop">Photoshop</a></li>
  10. </ul>
  11. </li>
  12. <li><a href="#">Categories</a>
  13. <ul>
  14. <li><a href="http://www.flashuser.net/category/freebies">Freebies</a></li>
  15. <li><a href="http://www.flashuser.net/category/photography">Photography</a></li>
  16. <li><a href="http://www.flashuser.net/category/web-design">Web Design</a></li>
  17. <li><a href="http://www.flashuser.net/category/wordpress">Wordpress</a></li>
  18. <li><a href="http://www.flashuser.net/category/inspiration">Inspiration</a></li>
  19. </ul>
  20. </li>
  21. <li><a href="#">Contact</a></li>
  22. </ul>
  23. </div>
  24.   <div id="corner-left">Corner left</div>
  25.   <div id="corner-right">Corner right</div>
  26.  
  27. <div class="content">
  28.  
  29. </div>
  30.  
  31. </div>
也想出现在这里?联系我们
创客主机

HTML 结构比较简单,也是经典的 ul li 结构。注意末尾的两个 div,corner left 和 corner right,是两侧的飘带结构。

CSS 代码:

  1. #menu-holder{margin:20px auto;width: 700px;height:61px;}
  2.  
  3. .menu {margin:0 auto;
  4. padding:0;
  5. width:700px;
  6. height: 61px;	
  7. background: #656d80;
  8. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #656d80),color-stop(0.6, #8690a9));
  9. background: -moz-linear-gradient(center bottom,#656d80 0%, #8690a9 60%);
  10. filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8690a9', endColorstr='#656d80');
  11. }
  12. .menu li {background: url("../images/menu-separator.gif") no-repeat scroll right center transparent;padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;}
  13. .menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0px 1px 0px #000000;}
  14. .menu li:hover > a {color:#ffffff;
  15. background:#56596a;
  16. background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56596a),color-stop(0.6, #686c80));
  17. background: -moz-linear-gradient(center bottom,#56596a 0%, #686c80 60%);
  18. filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#686c80', endColorstr='#56596a');
  19. }
  20. /* drop down sub-menu */
  21. .menu ul { background: #56596a;
  22. display: none;
  23. margin: 0;
  24. padding: 0;
  25. width: 190px;
  26. position: absolute;
  27. top: 61px;
  28. left: -1px;
  29. }
  30. .menu li:hover > ul {display: block;}
  31. .menu ul li {display:block;
  32. float: none;
  33. margin: 0px 0px 0px 15px;
  34. padding:2px 0px;
  35. background:url("../images/submenu-sep.gif") no-repeat scroll left bottom transparent;
  36. }
  37. /* sub menu hover link */
  38. .menu ul li:hover a, .menu li:hover li a {
  39. 	background: none;
  40. 	color: #ffffff;
  41. }
  42. .menu ul a {
  43. display:block;height:auto;
  44. 	font-size: 14px;
  45. 	padding:15px 0px 15px 10px;
  46. }
  47. .menu ul a:hover, .menu ul li:hover > a{
  48. 	background: #56596a !important;
  49. 	/* fix IE */
  50. 	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#56596a', endColorstr='#56596a'); 
  51. 	background: -webkit-gradient(linear, left top, left bottom, from(#56596a), to(#56596a)) !important;
  52. 	background: -moz-linear-gradient(top,  #56596a,  #56596a) !important;
  53. 	color: #e0e0e0 !important;
  54. }
  55.  
  56. #corner-left{position:absolute;background:url("../images/corner-left.png") no-repeat 0 0;top:19px;left:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}
  57. #corner-right{position:absolute;background:url("../images/corner-right.png") no-repeat 0 0;top:19px;right:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}

jQuery 代码:

  1. if (jQuery().superfish) {
  2. 		jQuery('ul.menu').superfish({
  3. 			delay: 230,
  4. 			animation: {opacity:'show', height:'show'},
  5. 			speed: 'fast',
  6. 			autoArrows: false,
  7. 			dropShadows: false
  8. 		}); 
  9.  
  10. 	}	
  11.  
  12. 	});

这里用到了 superfish 脚本库,所以页面上不仅要引用 jQuery 库,也要引用 superfish 库:

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script src="js/superfish.js" type="text/javascript"></script>

所有的脚本代码可以在源代码中看到,大家可以自行下载。

jQuery/CSS3 飘带式下拉菜单

已有 213 人购买
  • lwfr
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!