上面的技术可以说是比较老的了,现在大连的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就能看到结果
下面提供原文件压缩包
- 大小: 6.7 KB
- 大小: 8.5 KB
- 大小: 7.9 KB
分享到:
相关推荐
最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu最棒的菜单jscookmenu
JSCookMenu是与Tapestry集成的一个JavaScript库,用于创建具有可扩展子菜单的动态菜单系统,它使得在网页上创建复杂的导航结构变得更加简单。 Tapestry JSCookMenu组件允许开发者在Tapestry应用中无缝地使用...
结合以上分析,JSCook-开源项目是一个面向Web开发者的JavaScript工具集,其中的JSCookMenu.js用于创建交互式的菜单系统,而effect.js则提供了丰富的视觉效果。通过开源的方式,这个项目不仅提供了实用的代码库,也为...
`JSCookMenu.js`、`validator.js`和`menu_theme.js`这些JavaScript文件可能负责前端界面的交互和样式,例如创建下拉菜单、实现表单验证以及设定界面主题。它们是提高用户体验的关键组件,使得用户在管理项目和任务时...