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]
-->
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
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]
-->
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
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
>
示例效果没法在这里演示了,希望大家能喜欢