位置：首页>> 网络编程>> 网页设计>> css网页下拉菜单制作方法(2):初步实现

css网页下拉菜单制作方法(2):初步实现

作者：钟钟　来源：天极设计在线　发布时间：2007-02-03 11:39:00　

标签：下拉菜单,css,style

内容摘要：模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、display，同时，他们也是style对象的属性。今天我们就用这几个基本属性来实现一个简单的网页下拉菜单。

　　首先请大家看笔者已经做好的一个实例，然后我们对这个例子进行详细代码讲解。
　　为大家阅读方便，这里在代码中都加了注释。
代码如下：

<html>
<head>
<title>菜单实例</title>
<style type=text/css>
td,div  { font: normal 12px 宋体; }
</style>
</head>
<body style="margin-left:12px;margin-top:16px;">
<table cellpadding=0 cellspacing=0 width=90％ height=20 bgcolor=#CCCCCC>
<tr>    <td width=10> </td>
<td width=80 align=center onmouseover="menuShow(menu01)"    onmouseout="menuHide(menu01)">菜单实例</td>

   <td> </td>  </tr>
</table>
<div style="position:absolute;top:36px;left:20px;display:none;width:80px;height:100px;background-color:#DDDDDD;" id=menu01onmouseover="menuShow(this)" onmouseout="menuHide(this)">

<br>
菜单内容</div>
<script language=javascript>
function menuShow(menu)
//定义显示菜单的方法，参数menu即菜单的id。
{  menu.style.display=’block’;
//注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。
}
function menuHide(menu)
//定义隐藏菜单的方法，参数menu即菜单的id。
{  menu.style.display=’none’;
//同上
}
</script>
</body>
</html>

　　这样，一个简单的菜单就实现了，只要你略有一些相关的基础知识，反复体会一下我加的注释，就应该可以理解了，是不是并不难？
　　这个菜单现在看上去还有点简陋，下次我们将对这个菜单进行进一步的修饰。

延伸阅读：

css网页下拉菜单制作方法(1)：基本原理

css网页下拉菜单制作方法(3):样式修饰

css网页下拉菜单制作方法(4):定位问题

投稿

css网页下拉菜单制作方法(2):初步实现

猜你喜欢