Menu G5 初使用

最新推荐文章于 2022-11-26 17:37:36 发布
最新推荐文章于 2022-11-26 17:37:36 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： JavaScript 文章标签： menu javascript stylesheet 框架 结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Primary_wind/article/details/39186575
版权

因为项目需要查看翻阅了一下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红色代码和引入的文件就可以用了，非常方便。

HolyCode_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android中menu使用详解
08-29
Android 中 Menu 使用详解 Menu 是 Android 中必备的组件，每个 Android 项目都需要使用 Menu 来提供选择和导航功能，提高用户体验。本文将通过实例代码，详细介绍 Android 中 Menu 的使用。 Menu 的创建 要创建...
跨框架菜单menuG5使用
weixin_30556161的博客
09-06 163
1.介绍 目前很多网站使用了frame框架的结构，在顶端或左端放置菜单，可是一个非常头疼的问题就是二级菜单会被其他的frame遮挡住。查了很多的资料，都是说这个问题在frame中是无法解决得，也就是说frame没有设置可以修正这个问题。唯一的解决办法就是用JavaScript画动态层或动态定位已存在的子菜单层。在网上找到一款非常强大的菜单框架：menuG5，看了它的演示确实很牛，但是配置起来还...
Menu G5－不错的跨框架菜单
weixin_34334744的博客
01-12 114
最近项目要用到一个菜单，本来是自己打算写的，但后来发现难还不小，因为项目是用到framesets（框架的）布局的，所以需要一个支持cross-frame menu（框架菜单）的东东，所以就找到了 Menu G5，这里有它的简介 在使用过程中，才发现Menu G5是一个优秀的菜单控件，其特点有： 在同一页面可以无限制的建立菜单 在同一个菜单中可以建立N级的子菜单 菜单内容，菜单样式（CS...
OptionsMenu选项菜单使用Demo
09-28
为了使OptionsMenu与用户交互更友好，还可以使用`MenuItem`对象的方法，如`setOnMenuItemClickListener()`来添加点击监听器，或者使用`setVisible(false)`和`setVisible(true)`来动态控制菜单项的可见性。...
android menu菜单使用
03-21
本文将详细介绍如何在Android中创建和使用Menu菜单，尤其适合初学者。 首先，要使用Android菜单，我们需要在布局文件（如`activity_main.xml`）中不直接添加菜单元素，因为菜单通常在活动中动态生成。菜单的定义...
Menu和Toast使用Demo
08-03
在Android Studio中创建一个包含Menu和Toast使用的Demo，你需要： 1. 创建一个新的Android项目。 2. 在`res/menu`目录下创建`menu_main.xml`文件，定义菜单项。 3. 在主Activity（如`MainActivity.java`）中重写`...
Android中使用Menu
09-18
在Android活动中使用Menu，简单的程序。适应于初学者。 通过res中创建Menu文件，在Activity中通过onCreateOptionsMenu()方法和onOptionsItemSelected（）方法实现菜单栏功能
bootstrap 图片上传实例
热门推荐
Primary_wind的专栏
11-25 4万+
html: <input id="specialrecommendfile" type="file" size="30" name="file"> <button type="button" onclick="UploadSpecialRecommendPic()" class="btn btn-warning btn-lg">上传 <input type=hidden class=
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
Primary_wind的专栏
11-26 9452
谷歌浏览器插件是一种小型的定制浏览器体验的程序，通过插件可以自定义浏览器的一些行为来适合个人的需求，例如上面的查看服务器状态插件。在应用商店中下载下来的插件基本上都是以.crx 为文件后缀，该文件其实就是一个压缩包，包括插件所需要的 HTML，Javascript，CSS 、图片资源等等文件。开发 Chrome 插件只需要会 HTML，Javascript，CSS 就可以动手开发了。
javascript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Primary_wind的专栏
10-14 8057
function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 11, 30, 23, 59, 59); /*转换成秒*/ var time = (date2 - date) / 1000; var day = Math.floor(ti
Struts2+ajax之form表单提交实例
Primary_wind的专栏
11-06 7666
前台form代码： <input name="cName" class="form-control cname" required="" value="输入框1" type="text"> <input name="cName" class="form-control cname" required="" value="输入框2" type="text"> <b
Extjs 4.2 树结点右键菜单（全选，反选，撤销)
Primary_wind的专栏
04-27 6126
自己写的最新版本extjs4.2的树结点的操作，记录一下，以后可能会用到。 var tree = new Ext.tree.TreePanel({ flex: 1, animate: true,   autoScroll: true, anchor: '100% 93%', store: new Ext.data.TreeStore({ root:{ expanded: true
javascript 后台与前台传递json 需要注意换行符 不然报错
Primary_wind的专栏
11-17 3588
a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a'a
javascript 简单的瀑布流
Primary_wind的专栏
10-16 3289
刚开始接触js，就想写写经典的瀑布流，搜了下网上的教程，发现大多是用jquery写的，非常简单，用它也不用考虑兼容性的问题（jquery已经考虑到了），就想自己用原生的js写个简单的瀑布流模型，暂且没有考虑到拖动时自动排版的情形，以后再添加。（发现用原生的js果然步骤比较多啊！很多方法都很底层的！） waterfall flow body{margin:0p
Extjs 4.2 设置buttontext为中文
Primary_wind的专栏
04-27 1951
可以在Ext.QuickTips.init();后加入如下代码： Ext.MessageBox.buttonText = { ok : "确定", cancel : "取消", yes : "是", no : "否" };
javascript 数组去重
Primary_wind的专栏
10-14 1863
//去除数字元素数组 function sortnum(a, b) { return a - b; } Array.prototype.unique1 = function() { this.sort(sortnum); var newnumbers = [this[0]]; for (var i = 0; i < this.length; i++) { if (this[i] !=
Jit设置节点图片
Primary_wind的专栏
04-27 1808
jit并没有直接给出设置图片的方法，必须自己修改js源代码，步骤如下： 1.设置画布： 2.修改jit.js中var NodeHelper = {...}中任意方法。 3.修改原有代码为： var ctx = canvas.getCtx(); var img=new Image();//新建图像实例 img.src="b.jpg";//设置图像源 ctx.drawImage(img,
tkinter 如何使用Menu
最新发布
01-08
以下是使用Tkinter创建菜单的示例代码： ```python import tkinter as tk def hello(): print("Hello!") root = tk.Tk() # 创建菜单栏 menubar = tk.Menu(root) root.config(menu=menubar) # 创建文件菜单 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值