Menu G5 初使用

Bertha 。 2024-02-17 14:57 40阅读 0赞

因为项目需要查看翻阅了一下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 οnlοad="showMenu('Demo')">
    ......................................
    ......

只需要在你的页面中copy红色代码和引入的文件就可以用了，非常方便。