css网页下拉菜单制作方法(2):初步实现
作者:钟钟 来源:天极设计在线 时间:2007-02-03 11:39:00
内容摘要: 模拟网页下拉菜单中有几个比较关键的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>
<!-- 上两行为菜单中显示的文字,注意这里面的事件触发: onmouseover="menuShow(menu01)" 鼠标经过时显示菜单; onmouseout="menuHide(menu01)" 鼠标移走时隐藏菜单。 参数menu01即要显示的菜单的id,将在接下来的代码中看到。 menuShow与menuHide分别为显示、隐藏菜单方法,将在后面定义。 -->
<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)">
<!-- 以上三行,定义了菜单的一些属性,注意“id=menu01”,前面提到过。 position、top、left、display四个CSS属性即上一章讲过的; width、height、background-color分别为宽度、高度、背景色。 这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)", 就是说当鼠标从菜单按钮上移开,如果是移到了菜单上,菜单仍然显示。 注意这里参数是this而不是menu01,this即对象本身,在这里就是指menu01,所以结果相同。 在这里笔者有意使用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,style


猜你喜欢
MySQL UPDATE时主键冲突引发的思考
2008-06-21 17:00:00
高性能表现的网站(译)
2008-08-31 20:26:00

网页设计之关于素材和言志
2008-03-23 13:46:00

运用ASP调用数据库中视图及存储过程
2008-02-03 15:33:00
jQuery 选择器的使用
2008-01-21 13:07:00
怎么让按钮更容易被点击
2007-08-22 09:07:00

SQL游标原理和使用方法
2008-12-22 10:50:00
HTML,CSS和JavaScript速查表
2010-09-16 13:02:00

在Linux下安装Oracle
2010-07-30 12:46:00
什么设计师应该学习编写代码[译]
2009-07-08 14:58:00

Linux下Resin+JSP+MySQL安装和配置
2009-09-01 10:38:00
[hta]一个定时重启或关闭计算机的小工具
2007-10-17 12:02:00

MySQL常用维护管理工具
2009-03-08 16:51:00

利用global.asa计划执行程序
2008-03-05 12:49:00
[译]“我心中的ebay”
2008-06-04 12:09:00

静态页面利用JS读取cookies记住用户信息
2011-04-14 11:17:00
常用照片尺寸
2009-03-06 12:56:00
如何实现SQL Server的分页显示?
2010-05-18 18:36:00
区别Javascript中的Null与Undefined
2007-12-13 20:24:00
document.getElementById的简写方式
2010-06-21 10:44:00