向上展开的半透明菜单

2024-09-05 12:19:42

字体：大中小

来源：转载

供稿：网友

向上展开的半透明菜单，展开菜单后是可以看到背景的哦，透明度自己设置一下，风格有点类似XP系统的右键菜单一样，链接颜色什么的你需要自己修改一下，以适合你的网页风格。

<HTML><HEAD><TITLE>向上展开的菜单</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE>body{background:url(/jscss/demoimg/bgdemo3.jpg);}.menuover {BORDER-RIGHT: #1a71e6 1px solid; BORDER-TOP: #1a71e6 1px solid; BORDER-LEFT: #1a71e6 1px solid; CURSOR: hand; BORDER-BOTTOM: #1a71e6 1px solid; BACKGROUND-COLOR: #eaf2fd}.menuout {    CURSOR: hand}TD {    FONT-SIZE: 12px; COLOR: #1a71e6;TEXT-DECORATION: none}A {    FONT-SIZE: 12px; COLOR: #1a71e6; ‘TEXT-DECORATION: none}</STYLE><SCRIPT>var moveStep = 15; // 移动单位var moveTime = 10; //移动时间function MoveMenuBox(){ if(MenuBox.doing) {  clearInterval(MenuBox.doing) }  moveStep *= -1  MenuBox.doing = setInterval("DoMoveAction()",moveTime)}function DoMoveAction(){ var judger = MenuBox.style.pixelTop + moveStep; if(moveStep>0) {  if(judger <= MenuBox.parentElement.offsetHeight)  {   MenuBox.style.pixelTop = judger  }  else  {   MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight;   clearInterval(MenuBox.doing);   MenuBox.doing = false;  } } else {  if(judger >= 0)  {   MenuBox.style.pixelTop = judger  }  else  {   MenuBox.style.pixelTop = 0;   clearInterval(MenuBox.doing);   MenuBox.doing = false;  }  }}</SCRIPT></HEAD><BODY><TABLE cellSpacing=0 cellPadding=0 border=0>  <TBODY>  <TR>    <TD width="100%">      <DIV style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%">      <TABLE id=MenuBox       style="BORDER-RIGHT: #1a71e6 1px solid; BORDER-TOP: #1a71e6 1px solid; VISIBILITY: hidden; BORDER-LEFT: #1a71e6 20px solid; BORDER-BOTTOM: #1a71e6 1px solid; POSITION: relative"       cellSpacing=4 cellPadding=0 width=130>        <TBODY>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>关于我们</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>广告服务</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>用户留言</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>下载排行</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>最新更新</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>网页特效</TD></TR>        <TR>          <TD class=menuout onmouseover="this.className='menuover';"           onmouseout="this.className='menuout';" vAlign=center align=middle           height=20>软件书籍</TD></TR></TBODY></TABLE></DIV></TD></TR>  <TR>    <TD width="100%">      <TABLE id=judgerBox height=29 cellSpacing=0 cellPadding=0 width=130>        <TBODY>        <TR>          <TD style="FONT-SIZE: 6px" vAlign=center align=middle width=128           bgColor=#ffffff height=4></TD></TR>        <TR>          <TD           style="BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px outset; BACKGROUND-COLOR: #1a71e6"           onclick=MoveMenuBox() vAlign=center align=middle width=128             height=25>打开菜单</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><SCRIPT>function window.onload(){ MenuBox.style.pixelTop = MenuBox.parentElement.offsetHeight; MenuBox.style.visibility = "visible"}</SCRIPT>

上一篇：JavaScript纯文字折叠菜单

下一篇：带阴影绿色的CSS网站导航条