【源码】使用 Javascript 并结合 XML 制作滑动透明的菜单，且该菜单拥有跟随鼠标的注释

现在的位置: 首页 > 综合 > 正文

RSS

【源码】使用 Javascript 并结合 XML 制作滑动透明的菜单，且该菜单拥有跟随鼠标的注释

2013年10月03日 ⁄ 综合 ⁄ 共 3467字 ⁄ 字号小中大 ⁄ 评论关闭

上一篇(http://blog.csdn.net/cityhunter172/archive/2005/08/07/447663.aspx)无法修改，（出现 Http 请求超时的错误），故重新发表

本文主要介绍如何使用 javascript 加载用 XML 储存的菜单信息。此菜单以滑动的形式在页面上呈现，且该菜单的项目注释跟随鼠标移动。给你的网页带来无限的动感……欲见效果请访问我的主页—— http://172.meibu.com

一、在<body>之前引入脚本“GlideMenu.js”

二、在<body>之前，加载需要直接在页面上运行的初始化脚本

注：mtDropDown.direction.down 代表菜单从上往下滑动；”down” 换成 “right” 表示从左往右滑动出现（菜单项目较多时，比较适用）
mtDropDown.reference.bottomLeft 中的 ”bottomLeft” 也可换成以下几种情况（在此不一一解释了，各位自行体会）：
“topLeft”、”topRight”、”bottomRight”

三、在<body>中必须拥有以下两个需要用到的 Div

四、在<body>结束之前，依次引入以下语句，注意顺序不能乱

五、关联 body 的 onload 事件（“jscript/AddMenu.js”中的“WebInit()”）

六、给需要加载滑动菜单的节点赋于 ID ，并选择样式

例如：<span id="AccessMenu" class="siteType"> Access 站点</span>

七、编辑 XML 文档 “GlideMenu.xml”

例如：为 id="AccessMenu" 添加以下菜单节点

<?xml version="1.0" encoding="utf-8" ?>
<GlideMenu>
<MenuNode id="AccessMenu">
     <MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx">
        IT 部内部管理系统主要功能<UL><li>成员注册、审批<li>申请加班、填写请假条、及请假期间的工作代理<li>领用物品申请，物品及库存管理<li>专案进度管理、会议室预约<li>公告、软件管理、电子相册</li><li>用户、群组权限的设定</li></UL>
    </MenuItem>
    <MenuItem MenuName="<未知系统>" URL="">
       尚未布署 ^_^
    </MenuItem>
    <MenuItem MenuName="<未知系统>" URL="" width="100">
       尚未布署 ^_^
    </MenuItem>
</MenuNode>
</GlideMenu>

GlideMenu.xml 的格式要求：

1. <MenuNode id="AccessMenu"> 节点要有 id 属性，对应 <span id="AccessMenu">

2. <MenuItem MenuName="IT 内部网" URL="../SoftWeb/Login.aspx"> “ MenuName”指呈现在页面的菜单名称；“URL”是你需要跳转的页面网址；“width”是指定菜单注释的宽度，注意不是菜单的宽度

3. <MenuItem> 节点中的文本就是跟随鼠标的注释，注意此文本不能出现换行

4. 菜单名称与注释支持 HTML 显示，但必须将 "<" 换成 " < " 、将 ">" 换成 " > "。如：将
<UL> <li> 成员注册、审批 </li></UL>
转换成
<UL><li>成员注册、审批</li></UL>

八、加上样式，使得菜单变得透明

     .siteType{cursor:hand;color : #6600cc}
     .menuDesc{ FILTER: alpha(opacity=85);}
     .mtDropdownMenu { LEFT: -1imagespx; OVERFLOW: hidden; POSITION: absolute; TOP: -1imagespx }
     .mtDropdownMenu .content { POSITION: absolute }
     .mtDropdownMenu .items { BORDER-BOTTOM: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 2 }
     .mtDropdownMenu .item { BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-RIGHT: medium none; BORDER-TOP: medium none; COLOR: #0000cc; CURSOR: hand; FONT-FAMILY: "Verdana", "Arial", "Helvetica", "sans-serif"; FONT-SIZE: 12px; TEXT-DECORATION: none; EXT-DECORATION: none }
     .mtDropdownMenu .background { FILTER: alpha(opacity=70); LEFT: 0px; POSITION: absolute; TOP: 0px; Z-INDEX: 1; moz-opacity: .8 }
     .mtDropdownMenu .shadowRight { FILTER: alpha(opacity=40); POSITION: absolute; TOP: 3px; WIDTH: 2px; Z-INDEX: 3; moz-opacity: .4 }
     .mtDropdownMenu .shadowBottom { FILTER: alpha(opacity=40); HEIGHT: 2px; LEFT: 3px; POSITION: absolute; Z-INDEX: 1; moz-opacity: .4 }
     .mtDropdownMenu .hover { BACKGROUND: #cccccc; COLOR: #ffffff }
     .mtDropdownMenu .item IMG { MARGIN-LEFT: 10px }