当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 一个不被flash、select、activex遮挡的、跨frame的无限分级菜单

ASP.NET
asp.net Server.MapPath方法注意事项
asp.net下常用的加密算法MD5、SHA-1应用代码
几个 ASP.NET 小技巧
ASP.NET内置对象之Application对象
ASP.NET使用正则表达式屏蔽垃圾信息
asp.net“服务器应用程序不可用” 解决方法
asp.net Linq把数据导出到Excel的代码
asp.net ext treepanel 动态加载XML的实现方法
silverlight2.0Beta版TextBox输入中文解决方法
asp.net转出json格式客户端显示时间
asp.net下Linq To Sql注意事项小结
ASP.NET动态加载用户控件的实现方法
asp.net web大文件上传带进度条实例代码
asp.net DZ论坛中根据IP地址取得所在地的代码
向asp.Net进发 数据库连接操作
.net 上传文件前所未有的简单
asp.net gridview代码绑定
asp.net中List的使用方法
Asp.net(C#)实现验证码功能代码
asp.NET开发中正则表达式中BUG分析

ASP.NET 中的 一个不被flash、select、activex遮挡的、跨frame的无限分级菜单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 295 ::
收藏到网摘: n/a

一个不被flash、select、activex遮挡的、跨frame的无限分级菜单

该菜单改良自著名的chromemenu,可以无限分级,使用方法:

1、添加主菜单项

找到类似下面代码的部分:

以下为引用的内容:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>

在<ul>内部添加一个<li>,即可新添加一个主菜单项,注意给出“rel”的值,如上述代码所示。

2、为一个主菜单添加下拉菜单:

先看一级菜单的写法:

以下为引用的内容:

<!--子菜单1-->
<div id="dropmenu1" class="menu">
<ul>                   
<li><a href="http://eip/C10/内部邮件/default.aspx" target="_self" title="内部邮件">内部邮件</a></li>
<li><a href="http://eip/待办公文/default.aspx" target="_self">待办公文</a></li>
<li><a href="http://eip/C18/日程任务/default.aspx" target="_self">工作安排</a></li>
<li><a href="http://eip/C1/公文处理/default.aspx" target="_self">公文处理</a> </li>
</ul>
</div>

注意div的id要和对应的主菜单项的rel参数相同,当鼠标移动到此菜单项时即可显示下拉菜单,菜单样式由class控制。

再来看怎么添加分级菜单,先看代码:

以下为引用的内容:

<!--子菜单1-->
<div id="dropmenu6" class="menu">
  <ul>                   
    <li><a href="#" target="_self" title="驾驶舱">驾驶舱</a>
    <!--[if lte IE 6]><a href="#">驾驶舱<font face='Webdings' style='font-size: 6pt'>4</font><table><tr><td> <![endif]-->
      <ul>
        <li><a href="http://eip/C19/进入管理驾驶舱/default.aspx" title="管理驾驶舱">管理驾驶舱</a></li>
        <li><a href="http://eip/C19/进入管理驾驶舱/default.aspx" title="单位预警舱">单位预警舱</a></li>
      </ul>
      <!--[if lte IE 6]> </td></tr></table></a> <![endif]-->
    </li>

    <li><a href="http://eip/待办公文/default.aspx" target="_self">待办公文</a></li>
    <li><a href="http://eip/C18/日程任务/default.aspx" target="_self">工作安排</a></li>
    <li><a href="http://eip/C1/公文处理/default.aspx" target="_self">公文处理</a> </li>
  </ul>
</div>

要为哪个菜单项建立子菜单,就在其<li>内部添加代码段:

以下为引用的内容:

<!--[if lte IE 6]><a href="#">驾驶舱<font face='Webdings' style='font-size: 6pt'>4</font><table><tr><td> <![endif]-->
<ul>
<li><a href="http://eip/C19/进入管理驾驶舱/default.aspx" title="管理驾驶舱">管理驾驶舱</a></li>
<li><a href="http://eip/C19/进入管理驾驶舱/default.aspx" title="单位预警舱">单位预警舱</a></li>
</ul>
<!--[if lte IE 6]> </td></tr></table></a> <![endif]-->

注意开始和结束部分的绿色部分一定要带上   ,可以给由子菜单的菜单项加上一些特殊标记,以示由下一级菜单,比如上述代码中的“<font face='Webdings' style='font-size: 6pt'>4</font>”,即可在菜单项文字后面添加一个右向箭头。

注意子菜单中的“<li><iframe style="position:absolute;top:0px; left:0px;z-index:2;width:150px;height:176px;border:0;" frameborder=0 scrolling=no></iframe></li>”,目的是解决被activex覆盖的问题,如果页面上没有activex,可不用。

此段代码在一个较大项目的企业门户部分使用,测试没有问题,该项目已经验收完毕,代码中没有病毒。乱码应该是编码问题造成的,我的系统是英文版的。