JSCookMenu实践

最新推荐文章于 2012-12-25 10:14:55 发布

chenhailong118

最新推荐文章于 2012-12-25 10:14:55 发布

阅读量120

点赞数

分类专栏： JspAndFaceWeb 文章标签： ui javascript ViewUI

本文链接：https://blog.csdn.net/chenhailong118/article/details/84289443

版权

JspAndFaceWeb 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

上面的技术可以说是比较老的了，现在大连的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就能看到结果

下面提供原文件压缩包

chenhailong118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSCookMenu实践

上面的技术可以说是比较老的了，现在大连的javascript编写的menu多的数不胜数。比如JQuery UI的Menu和Extjs menu 现在项目中用到了，所以自己就做了一个小例子，尝尝鲜罢了。好了废话少说：首先我们要上官网下载JSCookMenu http://jscook.yuanheng.org/JSCookMenu/ 实践效果如下：...
复制链接

扫一扫

专栏目录