js 动态菜单

最新推荐文章于 2021-02-12 19:46:00 发布
最新推荐文章于 2021-02-12 19:46:00 发布
阅读量432 收藏
点赞数

<STYLE type=text/css>
a{color: #333333; text-decoration: none}
.alpha {
 FILTER: Alpha(Opacity=80)
}
.td1 {
 FONT-SIZE: 12px; FONT-FAMILY: "tahoma"
}
.td2 {
 FONT-SIZE: 12px; CURSOR: hand; FONT-FAMILY: "tahoma"; BACKGROUND-COLOR: #cfe7ff
}
.maskl {
 OVERFLOW: hidden
}
.cardtitle {
 BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 12px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: "tahoma"
}
.cardbottom {
 BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #aa6699
}
</STYLE>
<SCRIPT language=Javascript>
<!--
tBack=new Array(6);
tOut=new Array(6);

function menuOut(i){
var curMenu=eval("menu"+i);
 curMenu.runtimeStyle.zIndex=6;
 clearTimeout(tBack[i]);
 moveOut(i);
}

function menuBack(i){
var curMenu=eval("menu"+i);
 curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
 clearTimeout(tOut[i]);
 moveBack(i);
}

function moveOut(i){   
var curMenu=eval("menu"+i);
 if(curMenu.style.posLeft>0) {
  curMenu.style.posLeft-=2;               
  tOut[i]=setTimeout("moveOut('"+i+"')",1);
  }
}

function moveBack(i){        
var curMenu=eval("menu"+i);
 if(curMenu.style.posLeft<30) {
  curMenu.style.posLeft+=2;              
  tBack[i]=setTimeout("moveBack('"+i+"')",1);
  }
}

function swapClass(){
var swap=event.srcElement;
 if(swap.className=="td1") swap.className="td2"
  else if(swap.className=="td2") swap.className="td1";
}
document.οnmοuseοver=swapClass;
document.οnmοuseοut=swapClass;
//-->
</SCRIPT>
<BODY>
<DIV class=maskl id=menuPos style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 256px">

<DIV id=menu1 οnmοuseοver=menuOut(1) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px" οnmοuseοut=menuBack(1)>
<DIV class=cardbottom id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>公共信息</TD></TR>
  <TR>
    <TD class=td1 align=middle>部门信息</TD></TR>
  <TR>
    <TD class=td1 align=middle>在线用户</TD></TR>
  <TR>
    <TD class=td1 align=middle>讨论区</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD class=cardtitle width=86 bgColor=#aa6699 height=14>&nbsp;&nbsp;我的办公室</TD></TR></TBODY>
</TABLE>
</DIV>

<DIV id=menu2 οnmοuseοver=menuOut(2) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 20px; HEIGHT: 20px" οnmοuseοut=menuBack(2)>
<DIV class=cardbottom id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
          <TD class=td1 align=middle><a href="#" target="_blank">教学大纲</a></TD>
        </TR>
  <TR>
    <TD class=td1 align=middle><a href="#" target="_blank">教学计划</a></TD></TR>
  <TR>
    <TD class=td1 align=middle><a href="#" target="_blank">教学总结</a></TD></TR>
  <TR>
    <TD class=td1 align=middle><a href="#" target="_blank">教学周历</a></TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD class=cardtitle width=86 bgColor=#aa6699
  height=14>&nbsp;&nbsp;政务空间</TD></TR></TBODY></TABLE>
</DIV>

<DIV id=menu3 οnmοuseοver=menuOut(3) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px" οnmοuseοut=menuBack(3)>
<DIV class=cardbottom id=Layer3 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>即时通讯</TD></TR>
  <TR>
    <TD class=td1 align=middle>快速搜索</TD></TR>
  <TR>
    <TD class=td1 align=middle>在线音乐</TD></TR>
  <TR>
    <TD class=td1 align=middle>校园新闻</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD class=cardtitle width=86 bgColor=#aa6699
  height=14>&nbsp;&nbsp;网络空间</TD></TR></TBODY></TABLE>
 </DIV>

<DIV id=menu4 οnmοuseοver=menuOut(4) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px" οnmοuseοut=menuBack(4)>
<DIV class=cardbottom id=Layer4 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>电子邮件</TD></TR>
  <TR>
    <TD class=td1 align=middle>信访管理</TD></TR>
  <TR>
    <TD class=td1 align=middle>电子贺卡</TD></TR>
  <TR>
    <TD class=td1 align=middle>通讯录</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD class=cardtitle width=86 bgColor=#aa6699 height=14>&nbsp;&nbsp;个人事物</TD>
  </TR>
  </TBODY>
</TABLE>
</DIV>

<DIV id=menu5 οnmοuseοver=menuOut(5) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px" οnmοuseοut=menuBack(5)>
<DIV class=cardbottom id=Layer5 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>电话黄页</TD></TR>
  <TR>
    <TD class=td1 align=middle>列车时刻</TD></TR>
  <TR>
    <TD class=td1 align=middle>航空时刻</TD></TR>
  <TR>
    <TD class=td1 align=middle>世界时间</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD class=cardtitle width=86 bgColor=#aa6699
  height=14>&nbsp;&nbsp;办公助理</TD></TR></TBODY></TABLE>
</DIV>
</BODY>

whjwhja6
关注
JavaScript 动态网页实例 —— 基本菜单的设计
cccloveforever的博客
07-22 1110
本节实例给出基本的下拉菜单的实现方法。用户可以在下拉列表中选择一个链接，单击该链接后，将跳转至相应的链接页面。
js实现的动态菜单
10-30
用js实现动态菜单的基本功能，颜色可以自己挑换，数据可以动态给定
一个js的动态菜单菜单
05-03
一个js动态菜单.兼容多方面浏览器 不存在乱码问题
Javascript实现动态菜单添加
星.云计算
01-13 145
在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。 先来看看效果： Html源码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...
JS（简单的动态菜单）
小卡酷谋的博客
06-16 842
如何实现自定义菜单呢~ <style> .two { margin-left: 30px; } .three { margin-left: 60px; } </style> <div id="box"> </div> <script> let arr = [ {id:1, name: '零食', pid: 0, level: 1}, {id:2, name: '生活用品', pid: 0, level
JS实现一个动态下拉菜单栏
SunBoy晨晨
09-29 2187
1 引言    一段时间里,经常在网上的技术论坛中看到有朋友提问怎样用JS来实现一个动态的下拉弹出式的菜单栏,我个人觉的这种功能的实现,现在已经不是难题了,在网上搜一下,各种各样实现的方式都有,成型的代码皆是，那为什么还有这么多人再网上苦苦搜询实现的方法呢？我在读完了网上若干
鼠标移过放大的JS动态菜单.rar
07-04
"鼠标移过放大的JS动态菜单"是一个使用JavaScript实现的功能，它使得用户在鼠标悬停在菜单项上时，菜单项会放大显示，增加互动性和视觉吸引力。这个功能常用于网站的导航栏，使用户能够更加清晰地看到所选菜单的内容...
Javascript动态菜单
08-28
3. `Dmenu1.0_b.js`：这可能是实现动态菜单功能的具体JavaScript代码。Dmenu可能是一个自定义的菜单插件，用于创建具有特定效果和行为的下拉菜单。 4. `menuitem.txt`和`menu.txt`：这两个文件很可能是服务器返回的...
asp.net动态js菜单程序源码(动态菜单+静态菜单+数据库文件)
01-20
资源名：asp.net动态js菜单源码(动态菜单+静态菜单+数据库文件) 资源类型：程序源代码 源码说明： 1.Default.aspx页面是框架，需要静态菜单显示或是动态菜单显示，设置起始页。Login页面或LoginStatic页面。 2.运行 ...
鼠标移过放大的JS动态菜单特效代码
03-20
Javascript实现动态菜单添加的实例代码
12-12
先来看看效果： Html源码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ />...动态改变菜单</title> <script t
用javascript实现菜单的动态效果
12-24
包含用JAVASCRIPT用多种方法实现动态菜单的源码，要设计网页的时候经常用得到的。例：树型目录菜单，二级联、三级联菜单等等。
8种漂亮的js动态菜单
10-11
8种漂亮的js动态菜单,8种漂亮的js动态菜单
JS动态下拉菜单代码
01-27
动态下拉菜单源代码，通过JS实现动态效果功能!完整版代码。
JS实现网页动态折叠菜单
热门推荐
李阳阳的博客
09-12 1万+
最近做了一个多级菜单列表动态展示的功能，其中用到了vue.js渐进式框架、aui.css等，在此记录一下，也便于自己日后总结。 说明：vue.js不是必须要用的，因为我们项目中页面用的都是vue，因此我才用的vue方式进行数据绑定，也可以用其他方式实现。
javascript实现动态关联菜单
jalson 流浪汉的儿子
01-13 1030
function setcity() {  switch (document.shengshi.sheng.value) {   case 河北 :   var labels = new Array("石家庄","沧州","唐山");   var values = new Array("sjz","cz","ts");   break;   case 山东 :   v
JS生成动态菜单
teedry的专栏
01-28 3088
一个JS读取数据动态生成菜单的实现代码，不多说，具体代码如下：    // 动态菜单生成JSif (typeof (st_js) == "undefined") { stAHCM = 0;// 0 stAHWS = 1;// 1 stSMSC = 1;// 1 stSCSP = 0;// 0 stCFSP = 0;// 0 stBIMG = 1;// 1
在JavaScript文章中构建动态菜单
02-03 113
在这里，我们不是在谈论DHTML下拉/下拉菜单。 在这里，我们谈论的是使用JavaScript一个简单的导航菜单。 它确定了活动页面，并相应地从其他环节链接不同的显示，方便用户浏览。 这里我们采用的是将用于导航菜单下的所有页面的单个.js文件。 所以，你不需要更新所有的网页：你必须更新只有一个JavaScript库文件（.js文件）。 例如，考虑这3个导航链接： 链接1处于活动状态。 链...
java 动态生成菜单_Javascript实现动态菜单添加
weixin_42465953的博客
02-12 342
在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。先来看看效果：Html源码：动态改变菜单Province：Please Choose ProvinceHeBeiShanDongCity：Area：Javascript源码$(documen...
使用JavaScript实现打字效果动态菜单代码
这个JS打字效果动态菜单的实现涉及到JavaScript的DOM操作、定时器应用、事件监听等技术，通过结合HTML和CSS，能够创建一个富有动感和趣味性的网页菜单。对于想要提升网页交互性的开发者来说，这是一个值得学习和参考...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值