ADXMENU是一个不错的基于HTML组件和CSS样式以及JAVASCRIPT的菜单组件
它的优点是
1,兼容性好,在MOZILLA和IE上测试,效果都不错
2,可以突破FLASH或者下拉列表框遮档
如果你需要,可以下载,或者到它的老家去下载
下面的文档是其使用说明
下面的代码是使用ADXMENU产生的范例
示例效果没法在这里演示了,希望大家能喜欢
它的优点是
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样式即可
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>
<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>
示例效果没法在这里演示了,希望大家能喜欢