讨论：如何在浏览器中实现最简单的菜单？

gyb0330 2004-11-12 09:44:42
如何在浏览器中实现最简单的菜单？也就是我们在C/S原生窗口里经常做的那种菜单。例如我的电脑的菜单、IE的菜单。我知道在Bindows里能实现，但是好像只支持IE6。大家都来谈谈用HTML能不能实现？见解精辟者有分。
...全文
126 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
gyb0330 2004-11-16
  • 打赏
  • 举报
 回复
b.htc
<PUBLIC:COMPONENT>
<PUBLIC:PROPERTY Name="xmlsrc" PUT="putxmlsrc"/>
<PUBLIC:EVENT Name="onMenuClick" ID="menuClick" />
<PUBLIC:ATTACH EVENT="ondocumentready" For="element" ONEVENT="MenuInit()" />
<PUBLIC:ATTACH EVENT="onmouseover" for="element" ONEVENT="MenuOver()" />
<PUBLIC:ATTACH EVENT="onmouseout" for="element" ONEVENT="MenuOut()" />
<PUBLIC:ATTACH EVENT="onclick" for="element" ONEVENT="MenuClick()" />
<Script language="JavaScript">
var xmldoc=null;//xml文档对象变量
var activeMenu=null;//打开子菜单的父菜单对象变量
var menuContainer=null;//包含子菜单项容器对象变量
function putxmlsrc(str){//载入菜单数据文件
xmldoc= new ActiveXObject("Microsoft.XMLDOM");//创建xml文档对象
xmldoc.async=false;
xmldoc.load(str);//载入菜单数据
}
function MenuInit(){//初始化菜单
var parentMenuItems = xmldoc.selectNodes("//Itemlist/Item"); //读取一级菜单数据
var xmlElement = parentMenuItems.nextNode();
var newElement;
while (xmlElement != null){
newElement = document.createElement("span"); //创建菜单元素
newElement.type = "parentMenu";
with (newElement){
innerHTML = xmlElement.getAttribute("name");
id=xmlElement.getAttribute("value");
className="Menu";
}
with (newElement.style){
position="relative";//
width=40;//子菜单宽度
cursor="default";//
}
element.appendChild(newElement); //element指附加行为的元素
xmlElement = parentMenuItems.nextNode();
}
}
function MenuOver(){
var EventSource=event.srcElement;//捕获触发事件的对象
switch(activeMenu){//判断子菜单是否存在
case null://不存在子菜单
if(EventSource.type=="parentMenu")EventSource.className="Up_Menu";
break;
default:
switch(EventSource.type){//判断触发事件对象类型
case "parentMenu"://移入到一级菜单
if(activeMenu!=EventSource){//判断是否移入到新一级菜单
removeSubMenu();//删除原有子菜单
buildSubMenu(EventSource.id);//建立新子菜单
EventSource.setCapture();//对新菜单设置鼠标捕获
activeMenu.className="Menu";
activeMenu=EventSource; //更新打开子菜单的父菜单对象变量
activeMenu.className="Dn_Menu";
}
break;
case "subMenu"://移入到子菜单
EventSource.style.color="#ffffff";//子菜单鼠标移动时颜色//#003366//#ffffff白色
EventSource.style.textDecoration = "none";
EventSource.style.backgroundcolor = "#CCCCCC";//子菜单背景色
break;
}
break;
}
}
function MenuOut(){
EventSource=event.srcElement
switch(activeMenu){
case null:
if(EventSource.type=="parentMenu")EventSource.className="Menu";
break;
default:
if(EventSource.type=="subMenu"){
EventSource.style.color="#000000";//鼠标过子菜单颜色
EventSource.style.textDecoration="none";//鼠标过子菜单形状
EventSource.style.backgroundcolor ="red";
}
break;
}
}
function MenuClick(){
EventSource=event.srcElement
switch(EventSource.type){
case "parentMenu":
if(activeMenu!=EventSource){
removeSubMenu();
buildSubMenu(EventSource.id);
EventSource.setCapture();
EventSource.className="Dn_Menu";
activeMenu=EventSource;
}
break;
case "subMenu":
removeSubMenu();
activeMenu.className="Menu";
activeMenu.releaseCapture();//释放鼠标捕获设置
activeMenu=null;
var eventObject = createEventObject();//创建事件对象
eventObject.menuId = EventSource.id;//通过事件对象属性传递所选子菜单ID
menuClick.fire(eventObject);//将事件触发到容器页面
break;
default:
removeSubMenu();
if(activeMenu!=null){
activeMenu.releaseCapture();
activeMenu.className="Menu";
activeMenu=null;
}
break;
}
}
function buildSubMenu(EventSourceid){//建立子菜单
menuContainer = document.createElement("div");
with (menuContainer.style){
position="absolute";
left=-2;//子菜单左对齐位置
top=15;//子菜单上对齐位置
color="#000000";//子菜单颜色
cursor="default";//子菜单鼠标样式
}
eval(EventSourceid).appendChild(menuContainer);
var subMenuItems = xmldoc.selectNodes("//Item[@value='"+EventSourceid+"']/SubMenu");
var xmlElement = subMenuItems.nextNode();
var newElement;
while (xmlElement != null){
newElement = document.createElement("div");
newElement.type = "subMenu";
with (newElement){
innerHTML =xmlElement.getAttribute("name");
//innerHTML ="□ "+xmlElement.getAttribute("name");
id=xmlElement.getAttribute("value");
}
with (newElement.style){
width=75;//子菜单宽
height=18;//子菜单高
}
menuContainer.appendChild(newElement);
menuContainer.className="Up_Menu";
xmlElement = subMenuItems.nextNode();
}
}
function removeSubMenu(){//删除子菜单
if(menuContainer!=null)menuContainer.removeNode(true);
}
</Script>
</Component>
gyb0330 2004-11-16
  • 打赏
  • 举报
 回复
出点成绩了，不过扩展性不是很好，大家继续帮忙啊！
一共是4个文件，分别为a.htm b.htc b.htm b.xml，具体内容如下：
a.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
OpenWin();
CloseWin();
function OpenWin()
{
window.open ('b.htm', 'newwindow', 'height=screen.height, width=screen.width, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=yes') ;
}
function CloseWin()
{
var ua=navigator.userAgent
var ie=navigator.appName=="Microsoft Internet Explorer"?true:false
if(ie)
{
var IEversion=parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE "))))
if(IEversion< 5.5)
{
var str = '<object id=noTipClose classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">'
str += '<param name="Command" value="Close"></object>';
document.body.insertAdjacentHTML("beforeEnd", str);
document.all.noTipClose.Click();
}
else
{
window.opener =null;
window.close();
}
}
else
{
window.close()
}
}
</SCRIPT>
</BODY>
</HTML>
b.htm
<Html>
<Head>
<Title>菜单组件</Title>
<style>
*{font-size: 12px;}
body {margin: 0px;}
.Menu{border-top:1 solid #CCCCCC;border-bottom:1 solid #CCCCCC;border-left:1 solid #CCCCCC;border-right:1 solid #CCCCCC;background-color:#CCCCCC;}
.Up_Menu {border-top:2 outset;border-left:2 outset;border-right:1 outset #FFFFFF;border-bottom:1 outset #FFFFFF; background-color:#CCCCCC;}
.Dn_Menu{border-top:1 inset;border-left:1 inset;border-right:1 inset;border-bottom:1 inset;background-color:#CCCCCC;}
</style>
<script>
function HanderSubMenu(){//选择子菜单后相应处理
switch(event.menuId){
case event.menuId:
alert(event.menuId);
break;
}
}
</script>
</Head>
<Body style="background-color:#CCCCCC;">
<table width="100%" height="28" style="font-size:12px;">
<tbody>
<tr height="10">
<td width="120" height=20 align="center" style="border-top:2px groove;border-bottom:2px groove;">
<div id="Menu" style="behavior:url(b.htc)" xmlsrc="b.xml" onmenuclick="HanderSubMenu()">
</div>
</td>
</tr>
</tbody>
</table>
</Body>
</Html>
b.xml
<?xml version="1.0" encoding="gb2312" ?><!-- //xml处理指令指明为中文编码,若不指明则不支持中文 -->
<Itemlist>
<Item value="file" name="文件" >
<SubMenu value="New" name="新建"></SubMenu>
<SubMenu value="Open" name="打开"></SubMenu>
<SubMenu value="Save" name="保存"></SubMenu>
<SubMenu value="Print" name="打印"></SubMenu>
<SubMenu value="Exit" name="退出"></SubMenu>
</Item>
<Item value="Edit" name="编辑" >
<SubMenu value="Cut" name="剪切"></SubMenu>
<SubMenu value="Copy" name="复制"></SubMenu>
<SubMenu value="Paste" name="粘贴"></SubMenu>
<SubMenu value="Del" name="删除"></SubMenu>
</Item>
<Item value="Help" name="帮助">
<SubMenu value="Topic" name="主题"></SubMenu>
<SubMenu value="About" name="关于"></SubMenu>
</Item>
</Itemlist>
gyb0330 2004-11-15
  • 打赏
  • 举报
 回复
我的意思是模拟Windows标准菜单！
bolm 2004-11-15
  • 打赏
  • 举报
 回复
www.51windows.com
gyb0330 2004-11-15
  • 打赏
  • 举报
 回复
to cuixiping(无心):
你说的控件或者脚本哪里才能找到呢？
cuixiping 2004-11-13
  • 打赏
  • 举报
 回复
最简单？
我的电脑的菜单、IE的菜单 ＝＝＝》》》 简单吗？

我觉得不简单呢。
快捷键、菜单项图标、菜单项disabled、菜单项分隔线、菜单级联。。。。。

如果都自己来写的话，怎么也简单不到哪儿去。

要简单就用控件或者别人封装好的脚本。
fanxiaoqiang 2004-11-13
  • 打赏
  • 举报
 回复
给下拉菜单作为一个层，然后用主菜单的onmouseover事件触发层的显示，层的onmouseout触发层的隐藏。
shanxing 2004-11-13
  • 打赏
  • 举报
 回复
up + 接分 + 学习
huakaiqi 2004-11-13
  • 打赏
  • 举报
 回复
fen
minghui000 2004-11-13
  • 打赏
  • 举报
 回复
up + 接分 + 学习
gyb0330 2004-11-12
  • 打赏
  • 举报
 回复
呵呵，太具体了！
zanyzyg 2004-11-12
  • 打赏
  • 举报
 回复


用层就可以实现啊.

gyb0330 2004-11-12
  • 打赏
  • 举报
 回复
我的邮箱是geyb0330@126.com，谢谢
zanyzyg 2004-11-12
  • 打赏
  • 举报
 回复

不好意思了，好久没动这个东西了，不过我好像有个jsp写的一个简单的，以前开始学的时候弄得，不知道你需要不，可以发给你，只能供你参考了，写得不那么好。

airermeng 2004-11-12
  • 打赏
  • 举报
 回复
给下拉菜单作为一个层，然后用主菜单的onclik事件触发层的显示，层的onmouseout触发层的隐藏。
浏览器的工作原理：现代网络浏览器幕后揭秘
在过去的几年中，她查阅了所有公开发布的关于浏览器内部机制的数据（请参见资源），并花了很多时间来研读网络浏览器的源代码。她写道： 在 IE 占据 90% 市场份额的年代，我们除了把浏览器当成一个“黑箱”，什么也...
【JavaScript执行原理浅析】JavaScript解析引擎与浏览器又是什么关系？
简单地说，JavaScript引擎是浏览器的组成部分之一。因为浏览器还要做很多别的事情，比如解析页面、渲染页面、Cookie管理、历史记录等等。那么，既然是组成部分，因此一般情况下JavaScript引擎都是浏览器开发商自行...
动态菜单：用Spring Boot+Vue3教你怎么实现
在vhr中，考虑到菜单就是只有两级一级菜单和二级菜单，一级菜单是目录，二级菜单是则是具体的菜单项，没有三级菜单！所以在vhr中，查询菜单的时候我直接用了一个一对多的查询，将一级菜单做一的一方，二级菜单做多的...
介绍HTML5“菜单”和“菜单项”元素
menu>和<menuitem>中，部分交互式元素规范。... 这两个元素在开发人员中讨论最少，可能是由于它们在主要浏览器中缺乏支持。 在撰写本文时，Firefox是唯一实现此元素的浏览器。 菜单与导航元素 当我们...
chrome 固定缩放比例_您如何调整Google Chrome浏览器的用户界面缩放比例？
只需在Windows搜索栏中键入“ DPI”并打开最上面的结果，“使文本和其他项目显示更大或更小”(这就是Windows 7上的显示方式，但其他版本上的措辞可能不同)。 Option #3 选项＃3 Right-click on Google Chrome’s ...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章