码迷,mamicode.com
首页 > 其他好文 > 详细

Menu G5 初使用

时间:2014-09-10 22:33:21      阅读:279      评论:0      收藏:0      [点我收藏+]

标签: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 G5 初使用

标签:menu   javascript   stylesheet   框架   结构   

原文地址:http://blog.csdn.net/primary_wind/article/details/39186575

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!