<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
BODY {font-size:9pt;color:white;background-color:yellow}
TABLE{font-size:9pt;color:snow;background-color:darkblue;BORDER-COLLAPSE: collapse;text-align:center}
DIV{font-size:9pt;color:springgreen;background-color:green}
TD{cursor:hand}
FONT {font-size:9pt;color:lime;cursor:hand}
.over {color:gold;background-color:slateblue}
.out{ color:snow;background-color:darkblue}
</style>
<script>
function popmenu(obj1)
{
obj1.className="over";
menu1.style.backgroundColor="slateblue";
menu1.style.borderTopColor="slateblue";
menu1.style.top=obj1.offsetTop+obj1.offsetHeight;
menu2.style.top=obj1.offsetTop+obj1.offsetHeight+10;
menu1.style.left=obj1.offsetLeft+obj1.offsetWidth/2-40;
menu2.style.left=obj1.offsetLeft+obj1.offsetWidth/2-30;
menu1.style.display="";
menu2.style.display="";
}
function menuout(obj1) {
obj1.className="out";
menu1.style.backgroundColor="darkblue";
menu1.style.borderTopColor="darkblue";
}
function menuclear()
{ if (event.toElement.tagName!="FONT")
{
menu1.style.display='none';
menu2.style.display='none';
}
}
function hide()
{menu1.style.display='none';menu2.style.display='none';}
</script>
<title></title>
</head>
<body topmargin="0" leftmargin="0" onresize="location.reload()">
<script>
for(x=0;x<=document.body.offsetWidth;x+=10){
document.write("<div style='position:absolute;left:"+x+";top:0;height:100%;width:1;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
for(x=0;x<=document.body.offsetHeight;x+=10) {
document.write("<div style='position:absolute;left:0;top:"+x+";height:1;width:100%;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
</script>
<div id=menu1 onmouseout="menuclear()" style="position:absolute;text-align:center;color:snow;background-color:slateblue;top:100;left:100;height:200;width:80;display:none;border-style:solid;border-width:1;border-color:cyan;border-top-color:slateblue;z-index:1">
<br>
<script>
for(x=0;x<11;x++){document.write("<font onmouseover=this.style.color='red' onmouseout=this.style.color='lime'>子菜单一</font><br>");}
</script>
</div>
<div id=menu2 style="position:absolute;Filter:Alpha(opacity=40);background-color:black;height:200;width:80;z-index:-1;display:none"></div>
<table border="1" cellspacing="1" width="100%" bordercolor="#00FFFF" style="position: absolute; top: 0" >
<tr>
<td width="16%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'" >主页</td>
<td width="16%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单一</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单二</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单三</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单四</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单五</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
jQuery手风琴滑动下拉菜单代码是一款手风琴下拉菜单展开收缩效果代码。
js自适应左侧下拉菜单代码,自适应浏览器大小的手风琴下拉菜单,左侧下拉分类菜单收缩展开效果代码。
jQuery变形动画导航下拉菜单代码是一款在菜单项之间切换时,下拉菜单会根据菜单内容的大小来动态变形,平滑过渡效果非常有趣。
动态下拉菜单源代码,通过JS实现动态效果功能!完整版代码。
这是一款通过将不同的子菜单进行分组,制作出扁平风格多级菜单效果的jQuery垂直手风琴多级下拉菜单代码。
JQuery仿腾讯云滑动下拉导航菜单效果代码
jQuery手风琴下拉菜单代码是一款点击菜单收藏展开效果代码。
css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码 css3导航菜单鼠标滑过特效下拉菜单翻转动画效果代码
一款蓝色扁平风格的CSS3 SVG制作的响应式侧边导航下拉菜单代码,适用于用户个人中心左侧栏下拉菜单效果。
php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果
JS图片下拉菜单效果JS图片下拉菜单效果JS图片下拉菜单效果JS图片下拉菜单效果JS图片下拉菜单效果JS图片下拉菜单效果
一款简单实用的jQuery垂直手风琴折叠下拉菜单代码,点击可以一级菜单可收缩展开二级子菜单,而且还有过渡动画效果。
jQuery钢琴动画效果的二级下拉导航菜单代码 jQuery钢琴动画效果的二级下拉导航菜单代码 jQuery钢琴动画效果的二级下拉导航菜单代码 jQuery钢琴动画效果的二级下拉导航菜单代码
主要为大家详细介绍了vue仿写带过渡效果的下拉菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
纯css下拉菜单效果,只要css和div就能实现菜单的下拉效果
css3个性化下拉菜单、css3个性化下拉菜单、css3个性化下拉菜单、css3个性化下拉菜单
一款黑色大气美观的jQuery宽屏网站导航下拉菜单代码,二级下拉菜单可以使用图片,展示效果比较丰富。
一款Flash下拉菜单及Flash菜单源代码,鼠标放在主菜单上,会滑动出二级菜单,带阴影效果的Flash菜单,自带背景动画,那些零星的小亮点就是菜单的背景噢,在网页上用此菜单前,你可以先把Flash的背景设为透明,这样...
大气风格的jQuery网站导航下拉菜单代码,挺实用的一款企业网站多级导航菜单特效,下拉栏可以进行复杂的布局效果。
今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。 下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。 HTML代码 由于使用了bootstrap框架,因此其HTML结构也...