当前位置: 首页 > 图文教程 > 网络编程 > ASP > 用DHTML来模拟实现下拉菜单

ASP
飞云写的防CC攻击的ASP程序插件 打包下载
随机调用n条数据的方法分析
一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
asp 读取 utf-8格式文档并生成utf-8格式文档的乱码问题
实现纯真IP txt转mdb数据库的方法
用实现ASP批量删除目录及文件的代码
[ASP]RegExp对象提供简单的正则表达式支持功能使用说明
用ASP生成UTF-8网页文件的两种方法
asp利用fso给文件夹和文件改名的代码
asp 采集实战代码
解决采集时出现msxml3.dll 错误的方法
asp实现二进制字符串转换为Unicode字符串
asp 用InStr查找特定字符串的代码
[推荐]ASP编程通用函数收藏大全
去除HTML代码中所有标签的两种方法
asp Chr 函数 数字转字母的方法
asp快速开发方法之数据操作实例代码
asp去除所有的超级链接的两种方法 替换与正则
asp下实现截取字符串特定部分内容函数
asp下取得客户端IP地址函数 转换IP地址函数

ASP 中的 用DHTML来模拟实现下拉菜单


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

  我在许多的网站上看到上面都有下拉菜单的,使得网站更栩栩如生了!象微软的主页,后来我想假如单用div和JAvascript是否也能实现了,通过几次实验也总于成功了,现在把自己想法告诉大家,希望大家网页也加上下拉菜单使网爷更生动.
  以前DOS下编写应用程序都要面临着界面编写的,象菜单这些东西也要自己从头到尾都要自己编的,到了win时代,通过事件驱动我们就很容易编写了,何况菜单集成到系统里了,在IE下编写菜单也是基于通过捕获鼠标事件来响应菜单下拉和隐藏的,
  我们首先要用表格来显示菜单条,
<table>
<tr>
   <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuwenxue)">menu1</td>
   <td height="9" width="100" align=center bgcolor="#33FFFF" onmouseover="showmenu(menuxuexi)">menu1</td>
<tr>
<table>
<div id="menuwenxue" style="position:absolute; width:90px; height:115px; z-index:1; left: 245px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuwenxue)">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuwenxue)">
  <tr>
   <td height="10" class="menufont" onmouseover="showmenu(menuwenxue)">&nbsp;</td>
  </tr>
  <tr>
   <td height="28" align=center class="menufont" bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert('menu1_item1')">menu1_item1</a></td>
  </tr>
  <tr>
   <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert('menu1_item2')">menu1_item2</a></td>
  </tr>
  <tr>
   <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuwenxue)"><a href="JavaScript:alert('menu1_item3')">menu1_item3</a></td>
  </tr>
</table>
</div>

<div id="menuxuexi" style="position:absolute; width:90px; height:115px; z-index:1; left: 340px; top: 75px; visibility: hidden" onmouseout="hidemenu(menuxuexi)">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onmouseout="hidemenu(menuxuexi)">
  <tr>
   <td height="10" onmouseover="showmenu(menuxuexi)">&nbsp;</td>
  </tr>
  <tr>
   <td height="27" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert('menu2_item2')">menu2_item1</a></td>
  </tr>
  <tr>
   <td height="31" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert('menu2_item2')">menu2_item2</a></td>
  </tr>
  <tr>
   <td height="30" align=center bgcolor=#ff00ff onmouseover="showmenu(menuxuexi)"><a href="JavaScript:alert('menu2_item3')">menu2_item3</a></td>
  </tr>
</table>
</div>
<Script language="JavaScript">
<!--
function showmenu(menu){
if(menushow)
  menushow.style.visibility="hidden"  
menushow=menu
menu.style.visibility="visible"
}
function hidemenu(menu){
menu.