一个很棒的开源JS菜单-----JSCookMenu

本文链接：https://blog.csdn.net/LongLongRiver/article/details/1475907

菜单系统在桌面应用中应该不是什么很稀奇的东西，每种开发语言都提供了很成熟的的菜单系统，比如VB，DelPhi等等，我们只要直接调用就可以了。但在B/S开发中，情况就不是那么单纯了，HTML标记语言并没有給我们提供一个直接可以调用的菜单标签，所以，利用JS来编写自己的菜单系统就成了大多数Web应用开发者的所选途径了。

目前已经有很多形形色色的各种JS开发的页面菜单系统可以供我们免费下载使用了，但论功能，笔者个人觉得还是JSCookMenu最强（不同意的可别砸我板砖哦：））。

JSCookMenu的作者是一个在美的中国留学生－－－袁衡。中国人发起的开源项目不多，能被广泛使用的就更少了，这也是当初吸引我的一个地方。

JSCookMenu目前最新的版本是2.0.3，大家可以到其站点http://jscook.yuanheng.org下载最新版本。以下主要介绍其用法。

首先，先下载其最新版本的Core代码，将其解压后，得到两个JS文件：JSCookMenu.js 和 effect.js，再下载其皮肤文件，JSCookMenu目前提供三种皮肤样式：ThemeGray，ThemeOffice2003，ThemePanel，将其下载后，解压。

下面以ThemeOffice2003为例，编写我们的测试页面，其源码如下：

</script>

</head>
<body>
<div id="myMenuID"></div>
<script type="text/javascript">

cmDraw ('myMenuID', myMenu, 'vbr', cmThemeOffice2003);
</script>
</body>
</html>

怎么样，是不是看到一个漂亮的菜单了：）。

以下着重介绍一下cmDraw 这个函数，这个函数也是所有实现的入口，其构造方法是：

cmDraw (id, menu, orient, nodeProperties, prefix)

id：描述菜单的Array对象，

menu ：画菜单的区域，对应例子中的<div>myMenuID.
orient ：菜单的排列方向，其参数值可以为：hbr（横排向下靠右），hbl（横排向下靠左），hur（横排向上靠右），hul（横排向上靠左），vbr（竖排向下靠右），vbl（竖排向下靠左），vur，vul

nodeProperties :节点的外观属性，这个属性一般定义在theme.js文件中，必须与你应用的theme中的变量是一致的。
prefix 样式的前缀。默认为'',可以不用管。

值得一提的是，如果你使用的是themeoffice2003的样式，必须修改theme.js这个文件中的cmThemeOffice2003Base这个变量，这个变量标记的是菜单样式中所用的图片文件所在的路径，如果配置不合适，图片是无法很好显示的。

以上介绍了JSCookMenu的一般应用，除此之外，JSCookMenu还可以在菜单中集成动作，实现一些很Cool了的特性，下面再給一个例子：

<SCRIPT LANGUAGE="JavaScript"></SCRIPT>


  <DIV ID=PaletteMenu></DIV>
  <SCRIPT LANGUAGE="JavaScript"></SCRIPT>