网页菜单详解(2):初步实现 (1)
模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、display，同时，他们也是style对象的属性。今天我们就用这几个基本属性来实现一个简单的网页菜单。<BR><BR> 首先请大家看笔者已经做好的一个实例，然后我们对这个例子进行详细代码讲解。<BR><BR> 为大家阅读方便，这里采用在代码中加注释的方式，红色部分为注释。<BR><BR></FONT><BR>代码如下：<BR><BR><PRE>------------------------------------------------------<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> <FONT color=red><!-- 上两行为菜单中显示的文字，注意这里面的事件触发： onmouseover="menuShow(menu01)" 鼠标经过时显示菜单； onmouseout="menuHide(menu01)" 鼠标移走时隐藏菜单。 参数menu01即要显示的菜单的id，将在接下来的代码中看到。 menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义。 --></FONT> <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)"><FONT color=red><!--以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。position、top、left、display四个CSS属性即上一章讲过的；width、height、background-color分别为宽度、高度、背景色。这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"，就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。--></FONT><br> 菜单内容</div><script language=javascript>function menuShow(menu) <FONT color=red>//定义显示菜单的方法，参数menu即菜单的id。</FONT>{menu.style.display='block';<FONT color=red>//注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。</FONT>}function menuHide(menu) <FONT color=red>//定义隐藏菜单的方法，参数menu即菜单的id。</FONT>{menu.style.display='none';<FONT color=red>//同上</FONT>}</script></body></html>------------------------------------------------------</PRE> 这样，一个简单的菜单就实现了，只要你略有一些相关的基础知识，反复体会一下我加的注释，就应该可以理解了，是不是并不难？<BR><BR> 这个菜单现在看上去还有点简陋，下次我们将对这个菜单进行进一步的修饰。<BR></p><p align='center'><b><font color='red'></font> <a href='/news/news001/dreamweaver/200510/20051016192902_2.html'></a> <a href='/news/news001/dreamweaver/200510/20051016192902_2.html'></a></b></p>模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、display，同时，他们也是style对象的属性。今天我们就用这几个基本属性来实现一个简单的网页菜单。<BR><BR> 首先请大家看笔者已经做好的一个实例，然后我们对这个例子进行详细代码讲解。<BR><BR> 为大家阅读方便，这里采用在代码中加注释的方式，红色部分为注释。<BR><BR></FONT><BR>代码如下：<BR><BR><PRE>------------------------------------------------------<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> <FONT color=red><!-- 上两行为菜单中显示的文字，注意这里面的事件触发： onmouseover="menuShow(menu01)" 鼠标经过时显示菜单； onmouseout="menuHide(menu01)" 鼠标移走时隐藏菜单。 参数menu01即要显示的菜单的id，将在接下来的代码中看到。 menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义。 --></FONT> <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)"><FONT color=red><!--以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。position、top、left、display四个CSS属性即上一章讲过的；width、height、background-color分别为宽度、高度、背景色。这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"，就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。--></FONT><br> 菜单内容</div><script language=javascript>function menuShow(menu) <FONT color=red>//定义显示菜单的方法，参数menu即菜单的id。</FONT>{menu.style.display='block';<FONT color=red>//注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。</FONT>}function menuHide(menu) <FONT color=red>//定义隐藏菜单的方法，参数menu即菜单的id。</FONT>{menu.style.display='none';<FONT color=red>//同上</FONT>}</script></body></html>------------------------------------------------------</PRE> 这样，一个简单的菜单就实现了，只要你略有一些相关的基础知识，反复体会一下我加的注释，就应该可以理解了，是不是并不难？<BR><BR> 这个菜单现在看上去还有点简陋，下次我们将对这个菜单进行进一步的修饰。<BR></p><p align='center'><b><font color='red'></font> <a href='/news/news001/dreamweaver/200510/20051016192902_2.html'></a> <a href='/news/news001/dreamweaver/200510/20051016192902_2.html'></a></b></p>
<p></p></p><p align='center'><b><a href='/news/news001/dreamweaver/200510/20051016192902.html'></a><a href='/news/news001/dreamweaver/200510/20051016192902.html'></a> <font color='red'></font> </b></p>
页:
[1]