上面的技术可以说是比较老的了,现在大连的javascript编写的menu多的数不胜数。比如JQuery UI的Menu和Extjs menu
现在项目中用到了,所以自己就做了一个小例子,尝尝鲜罢了。
好了废话少说:
首先我们要上官网下载JSCookMenu
http://jscook.yuanheng.org/JSCookMenu/
实践效果如下:
下载之后我们还要下载官网提供的CSS和图片
http://sourceforge.net/projects/jscook/files/
下面我们开始实装
目录结构如上
1.html如下:
<html> <head> <title> JSCookMenu </title> <script type="text/javascript"> <!-- var myMenu = [ ['icon', 'title', 'url', 'target', 'description'], // a menu item ['icon', 'title', 'url', 'target', 'description'], // a menu item ['icon', 'title', 'url', 'target', 'description', // a folder item ['icon', 'title', 'url', 'target', 'description'], // a menu item ['icon', 'title', 'url', 'target', 'description'], // a menu item ['icon', 'title', 'url', 'target', 'description', // a folder item ['icon', 'title', 'url', 'target', 'description'], // a menu item ['icon', 'title', 'url', 'target', 'description'] // a menu item ] ] ]; --> </script> </head> <script type="text/javascript" src="JSCookMenu/JSCookMenu.js"></script> <link rel="stylesheet" href="JSCookMenu/ThemePanel/theme.css" type="text/css"> <script type="text/javascript" src="JSCookMenu/ThemePanel/theme.js"></script> <body> <div id="myMenuID"></div> <script type="text/javascript"> <!-- cmDraw ('myMenuID', myMenu, 'hbr', cmThemePanel); --> </script> </body> </html>
JSCookMenu里面目录结构
ThemPanel为下载的样式
effect.js和JSCookMenu 是JSCookMenu的原source
运行1.html就能看到结果
下面提供原文件压缩包