ADXMENU是一个不错的基于HTML组件和CSS样式以及JAVASCRIPT的菜单组件
它的优点是
1,兼容性好,在MOZILLA和IE上测试,效果都不错
2,可以突破FLASH或者下拉列表框遮档
如果你需要,可以下载,或者到它的老家去下载
下面的文档是其使用说明
使用ADXMENU的条件和方法
1,这个版本的ADXMENU仅支持IE5.0以上的浏览器
2,将ADXMENU文件夹复制到站点根文件夹下
主要包含以下文件及文件夹
ReadMe.txt 本文档,使用说明
Adxmenu.Js JS脚本
AdxMenu.Htc HTML组件
Hmenu 横式菜单所需的CSS文件
Menu.Css 基本的CSS样式文件
Menu4Ie.css 专门为IE定制的文件(如果需要在IE中使用,则必须包含此文件)
VMenu 竖式菜单使用的CSS文件
3,如果使用模式菜单,请将以下代码包含在HTML文件的HEAD段内:
<!--Below this line is Menu-->
<!--[if !IE]>
<script src="Adxmenu/ADxMenu.js"></script>
<![endif]-->
<style type="text/css" media="screen, tv, projection" designtimesp="15856">
@import "AdxMenu/Hmenu/Menu.css";
</style>
<!--[if lte IE 6]>
<STYLE type=text/css>
@import "AdxMenu/Hmenu/Menu4IE.css";
body { behavior:url("AdxMenu/ADxMenu.htc"); }
</STYLE>
<![endif]-->
<!--Menu end-->
如果使用竖式菜单,请将以下代码包含在HTML文件的HEAD段内
<!--Below this line is Menu-->
<!--[if !IE]>
<script src="Adxmenu/ADxMenu.js"></script>
<![endif]-->
<style type="text/css" media="screen, tv, projection" designtimesp="15856">
@import "AdxMenu/Vmenu/Menu.css";
</style>
<!--[if lte IE 6]>
<STYLE type=text/css>
@import "AdxMenu/Vmenu/Menu4IE.css";
body { behavior:url("AdxMenu/ADxMenu.htc"); }
</STYLE>
<![endif]-->
<!--Menu end-->
4,菜单的定义模式如下:
<div id="menu">
<!--定义菜单根,Id必须为Menu-->
<ul id="menuList" class="adxm">
<!--定义菜单列表开始-->
<li class="submenu">
<!--定义菜单项开始-->
<a href="#">Products</a>
<ul id="ProductsMenu">
<li>
<a href="#">Overview</a></li>
<li class="submenu" id="itemCategories">
<a href="#">Categories</a>
<ul id="CategoriesMenu">
<li><a href="#">Software</a></li>
<li class="submenu">
<a href="javascript:alert('hi');"><imgsrc="/images/base.gif" align="absMiddle"border="0">Hardware</a>
<ul id="HardwareMenu">
<li><a href="#">START</a></li>
菜单的定义具有以下规律
1,整个菜单定义于一个Div标记中,这个DIV标记是菜单容器,其ID必须为menu
2,主菜单列表ID必须为menuList(注意区分大小写),其CLASS为adxm,如果主菜单是竖向的,那么其CLASS则必须为"adxm adxmV"
3,每一个菜单列表都必须具有唯一的ID
4,每一个菜单项使用LI标记描述一个LI标记内为一个菜单项的内容,如果某个菜单项需要弹出子菜单,则必须为其加上Class="SubMenu"属性,有下级菜单的菜单项格式为<li class="submenu">菜单项内容<ul id="子菜单项ID"></ul></li>
5,所有的嵌套子菜单不能出现交叉
6,要修改菜单项外观,请打开Menu.Css文件和Menu4Ie.css文件,更改
#menu
#memnu a
#menu li:hover
#menu li li.submenu>a
#menu li ul
#menu li li.submenu:hover>a
的CSS样式即可
下面的代码是使用ADXMENU产生的范例
<div id="menu">
<ul id="menuList" class="adxm">
<li class="submenu"><a href="/file.aspx">文件</a>
<ul id="FileSubmenu">
<li><a href="#">New
</a></li>
<li><a href="#">Open
</a></li>
</ul>
</li>
<li><a href="/file.aspx">编辑</a></li>
<li><a href="/file.aspx">帮助</a></li>
</ul>
</div>
示例效果没法在这里演示了,希望大家能喜欢
它的优点是
1,兼容性好,在MOZILLA和IE上测试,效果都不错
2,可以突破FLASH或者下拉列表框遮档
如果你需要,可以下载,或者到它的老家去下载
下面的文档是其使用说明
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
下面的代码是使用ADXMENU产生的范例
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
示例效果没法在这里演示了,希望大家能喜欢