您的位置：首页 > Web前端 > JavaScript

一个常用的javaScript菜单效果

2009-01-06 13:32 351 查看
最近发现学习javaScript有所突破，所有试着做了几个例子，这个就是其中的一个，什么也不用说了，都在代码里。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
ul
{
list-style-type:none;
margin-left:0px;
}
.menu
{
width:100px;
float:left;
background-image:url(../images/titlebg2.gif)
}
.submenu
{
background-color:#D4E4F6;
line-height:25px;
width:100%;
display: none;
}

</style>
<script type="text/javascript">
function show(id)
{
document.getElementById(id).style.display="block";
}
function hide(id)
{
document.getElementById(id).style.display="none";
}
function clickEvent(o)
{
var object=document.getElementById(o);
object.style.backgroundImage="url(../images/titlebg1.gif)";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li class="menu" onmousemove="show('submenu1')" onmouseout="hide('submenu1')" id="menu1">
<a href="#" onclick="clickEvent('menu1')">菜单一</a>
<div id="submenu1" class="submenu" ><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
</li>
<li class="menu" onmousemove="show('submenu2')" onmouseout="hide('submenu2')">
<a href="#">菜单二</a>
<div id="submenu2" class="submenu" onmousemove="show('submenu1')" onmouseout="hide('submenu1')"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
</li>
<li class="menu" onmousemove="show('submenu3')" onmouseout="hide('submenu3')">
<a href="#">菜单三</a>
<div id="submenu3" class="submenu"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
</li>
<li class="menu" onmousemove="show('submenu4')" onmouseout="hide('submenu4')">
<a href="#">菜单四</a>
<div id="submenu4" class="submenu"><ul><li><a href="">子菜单一</a></li><li><a href="">子菜单二</a></li><li><a href="">子菜单三</a></li></ul></div>
</li>
</ul>
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航