jQuery插件Drop Line Menu横向下滑菜单

这里介绍jQuery插件Drop Line Menu一个横向下滑菜单，使用方法与NotesForMenu插件一样，非常简单，同时UI效果也非常不错，效果图如下：
jQuery插件Drop Line Menu横向下滑菜单

点我查看jQuery插件Drop Line Menu在线实例
http://www.biuuu.com/demo/drop_line_menu/

使用说明
需要使用jQuery库文件和Drop Line Menu库文件

使用实例
一，包含文件部分

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

二，HTML部分

  1. <div id="mydroplinemenu" class="droplinebar">
  2. <ul>
  3. <li><a href="http://www.biuuu.com">主页</a></li>
  4. <li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
  5. <ul>
  6. <li><a href="#">Activities 1</a></li>
  7. <li><a href="#">Activities 2</a></li>
  8. <li><a href="#">Activities 3</a>
  9. <ul>
  10. <li><a href="#">Water Sports 1</a></li>
  11. <li><a href="#">Water Sports 1</a></li>
  12. <li><a href="#">Water Sports 1</a></li>
  13. <li><a href="#">Water Sports 1</a></li>
  14. </ul>
  15. </li>
  16. <li><a href="#">Activities 4</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
  20. <li><a href="http://www.javascriptkit.com/">JavaScript</a>
  21. <ul>
  22. <li><a href="#">Traveling 1</a></li>
  23. <li><a href="#">Traveling 2</a></li>
  24. <li><a href="#">Traveling 3</a></li>
  25. <li><a href="#">Traveling 4</a>
  26. <ul>
  27. <li><a href="#">Africa 1</a></li>
  28. <li><a href="#">Africa 2</a></li>
  29. <li><a href="#">Africa 3</a></li>
  30. <li><a href="#">Africa 4</a>
  31. <ul>
  32. <li><a href="#">Kenya 1</a></li>
  33. <li><a href="#">Kenya 2</a></li>
  34. <li><a href="#">Kenya 3</a></li>
  35. <li><a href="#">Kenya 4</a></li>
  36. <li><a href="#">Kenya 5</a></li>
  37. </ul>
  38. </li>
  39. </ul>
  40. </li>
  41. <li><a href="#">Traveling 5</a></li>
  42. </ul>
  43. </li>
  44. <li><a href="http://www.biuuu.com">必优博客</a></li>
  45. </ul>
  46. </div>

三，Javascript部分
<script type="text/javascript">
droplinemenu.buildmenu("mydroplinemenu")
</script>

如上实例把ID为mydroplinemenu的DIV创建为菜单，其使用形式为：
<div id="xxx">
<ul><li></li></ul>
</div>

如果是多级菜单，则在<li></li>中包含下一级的<ul><li></li></ul>，这与其它的jQuery菜单插件实现机制一样，非常简单。

使用jQuery插件Drop Line Menu需要使用两张菜单的背景图片和一张下拉提示小图标，如下：

具体可查看实例源程序包，同时要注意菜单的CSS样式，可根椐具体的应用进行修改，值得推荐。

共有0个回答