点击这里查看效果
以横向ddsmoothmenu下来菜单为例，以下是实现代码：
1 <base target="_blank" /><link rel="stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/menu/6/ddsmoothmenu.css" /> 2 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 3 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/menu/6/ddsmoothmenu.js"></script> 4 <div id="smoothmenu1" class="ddsmoothmenu"> 5 <ul> 6 <li><a href="http://keleyi.com/a/bjac/h2dj4d34.htm">Item 1</a></li> 7 <li><a href="http://keleyi.com/keleyi/phtml/menu/6.htm">Folder 0</a> 8 <ul> 9 <li><a href="http://keleyi.com/a/bjac/0xusjq8m.htm">Sub Item 1.1</a></li> 10 <li><a href="http://keleyi.com">Sub Item 1.2</a></li> 11 <li><a href="http://keleyi.com">Sub Item 1.3</a></li> 12 <li><a href="http://keleyi.com">Sub Item 1.4</a></li> 13 <li><a href="http://keleyi.com/a/bjac/2fs4sdog.htm">Sub Item 1.2</a></li> 14 <li><a href="http://keleyi.com">Sub Item 1.3</a></li> 15 <li><a href="http://keleyi.com/a/bjac/usklan8m.htm">Sub Item 1.4</a></li> 16 </ul> 17 </li> 18 <li><a href="http://keleyi.com">Folder 1</a> 19 <ul> 20 <li><a href="http://keleyi.com">Sub Item 1.1</a></li> 21 <li><a href="http://keleyi.com">Sub Item 1.2</a></li> 22 <li><a href="http://keleyi.com/a/bjac/06ysbxv0.htm">Sub Item 1.3</a></li> 23 <li><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm">Sub Item 1.4</a></li> 24 <li><a href="http://keleyi.com/a/bjac/ara6jk5h.htm">Sub Item 1.2</a></li> 25 <li><a href="http://keleyi.com/a/bjac/4yiwpvt0.htm">Sub Item 1.3</a></li> 26 <li><a href="http://keleyi.com/a/bjac/k3qur783.htm">Sub Item 1.4</a></li> 27 </ul> 28 </li> 29 <li><a href="http://keleyi.com/a/bjac/79a7a1f25a339e0a.htm">Item 3</a></li> 30 <li><a href="http://keleyi.com/a/bjac/4w0otu4n.htm">Folder 2</a> 31 <ul> 32 <li><a href="http://keleyi.com">Sub Item 2.1</a></li> 33 <li><a href="http://keleyi.com">Folder 2.1</a> 34 <ul> 35 <li><a href="http://keleyi.com">Sub Item 2.1.1</a></li> 36 <li><a href="http://keleyi.com">Sub Item 2.1.2</a></li> 37 <li><a href="http://keleyi.com">Folder 3.1.1</a> 38 <ul> 39 <li><a href="http://keleyi.com">Sub Item 3.1.1.1</a></li> 40 <li><a href="http://keleyi.com/a/bjac/qm8rslq3.htm">Sub Item 3.1.1.2</a></li> 41 <li><a href="http://keleyi.com">Sub Item 3.1.1.3</a></li> 42 <li><a href="http://keleyi.com/a/bjac/ca7qisib.htm">Sub Item 3.1.1.4</a></li> 43 <li><a href="http://keleyi.com">Sub Item 3.1.1.5</a></li> 44 </ul> 45 </li> 46 <li><a href="http://keleyi.com/a/bjac/sxq4jj4d.htm">Sub Item 2.1.4</a></li> 47 </ul> 48 </li> 49 </ul> 50 </li> 51 <li><a href="http://keleyi.com/menu/javascript/">Item 4</a></li> 52 </ul> 53 <br style="clear: left" /> 54 </div> 55 <script type="text/javascript"> 56 57 ddsmoothmenu.init({ 58 mainmenuid: "smoothmenu1", //menu DIV id 59 orientation: 'h', //横向设置"h"，竖向为"v" 60 classname: 'ddsmoothmenu', //class added to menu's outer DIV 61 //customtheme: ["#1c5a80", "#18374a"], 62 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] 63 }) 64 65 </script>