标签:menu javascript stylesheet 框架 结构
因为项目需要查看翻阅了一下Menu G5的用法,Menu G5作为一个跨frame框架的js库,使用起来还是比较方便的,但是中文的教程确实比较少,而且现在前台也基本上都用div了,哎,没办法,只能边学边看了。
Menu G5的目录结构:
css:放置menuG5的默认样式
examples:N个使用实例,通过这个学习如何配置和使用,我认为比通过他的Document快多了
faq:如其名,一些问题解答,也就是一些使用方法
script:这个文件夹是最重要的,里面包含了生成菜单的所有js文件,将来把这个包要复制到项目中去
index.html:主页链接
接下来就是配置了:
只需要引入
menuG5LoaderFSX.js
menuG5.css
就可以了,基本上script文件夹里面的不需要改动。
样式的加入,examples中有详细的例子,比如你看中了一款样子,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html> <html> <head> <title>Menu G5 Examples: Highlight it</title> <link rel=stylesheet href="../css/menuG5.css" type="text/css"> <style type="text/css"> <span style="color:#FF0000;">.pad { padding:0px 30px; border-width:1px; border-style:solid; border-color:#ffffff #ffffff #666666 #ffffff; } .padSub { padding:1px; border-width:1px; border-style:solid; border-color:#666666; background-color:#cccccc; } .padSub2 { padding:1px; border-width:1px; border-style:solid; border-color:#666666; background-color:#cccccc; } .itemTopOff { width:90px; padding:1px 12px; background-color:#999999; border-width:1px 1px 0px 1px; border-style:solid; border-color:#666666; text-align:center; } .itemTopOn { cursor:default; width:110px; padding:4px 12px; background-color:#f0f0f0; border-width:1px 1px 0px 1px; border-style:solid; border-color:#666666; text-align:center; } .itemOff { width:115px; padding:1px 6px 1px 11px; text-align:left; background-color:#cccccc; } .itemOn { cursor:default; width:115px; padding:1px 6px 1px 11px; text-align:left; background-color:#333333; } .fontTopOff { font-family:verdana; font-size:10pt; color:#000000; } .fontTopOn { font-family:verdana; font-size:10pt; color:#000000; font-weight:bold; } .fontOff { font-family:verdana; font-size:10pt; color:#000000; } .fontOn { font-family:verdana; font-size:10pt; color:#ffffff; } .tagOff { width:8px; height:13px; float:right; background:url("images/tagRN.gif") no-repeat bottom; } .tagOn { width:8px; height:13px; float:right; background:url("images/tagRH.gif") no-repeat bottom; }</span> </style> <span style="color:#FF0000;"> <script language="javascript" src="menu/highlight-path.js"></script> <script language="javascript" src="../script/menuG5LoaderX.js"></script></span> </head> <body onload="showMenu('Demo')"> ...................................... ......只需要在你的页面中copy红色代码和引入的文件就可以用了,非常方便。
标签:menu javascript stylesheet 框架 结构
原文地址:http://blog.csdn.net/primary_wind/article/details/39186575