点击这里查看效果
以横向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>

转载自:http://keleyi.com/a/bjac/h2dj4d34.htm

web前端:http://www.cnblogs.com/jihua/p/webfront.html

posted on 2013-12-16 20:14  计划  阅读(2500)  评论(0编辑  收藏  举报