网页菜单详解：基本原理

2017-02-26 分类：网站建设

在讲解之前，有一点需要说明的是：笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer（即我们通常所说的IE）下的。笔者进行调试的浏览器是IE 5.01。另外，这样一个菜单体现的是HTML/CSS/javascript的综合应用，这里并不对一些细节进行详细的讲解，所以你至少应该有一点这方面的基础。

　　基本原理

其实，这个菜单实现的原理简单的说就是：设置页面元素的CSS属性，对其进行定位并设置其是否可见，然后通过激发一定的事件，用javascript来动态的改变这些属性。

看下面几个CSS属性：

position：定位类型，取值static/absolute/relative，其代表的含义简单的说即无定位/绝对定位/相对定位；
　　left：距离左侧的位置（具体的参照物与position的设置有关），单位为px或%；
　　top：距离顶部的位置（具体的参照物与position的设置有关），单位为px或%。
　　display：页面元素的显示状态，如取值block表示做为块状元素显示，none则为不显示，还有其他一些取值（如inline等）这里就不做详解。

比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了这几个属性。

下面我们来看看如何用javascript来控制页面元素的CSS属性。

对HTML有一定了解的朋友一定清楚，几乎所有的标记都有一个style属性，通过设置这个属性来设置该标记的CSS属性（即CSS的内联用法）。在javascript中，每一个标记都被视为Document对象的一个子对象，而该标记的每一个HTML属性也都是这个对象的属性或子对象，style就是其中一个，通过用javascript控制style的属性，就达到了动态改变页面元素CSS属性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一个很普通的用法，其中myMenu即我们所看到的“菜单”的ID，它原来的display为none，即不显示，当鼠标移上去时，变为block，即块状显示。

另外要提的是：前面只说了如何实现定位、如何动态控制，那么定位的、控制的是什么元素呢？原则上来讲，大部分块状元素（如div、table）都可以，而在IE中，div标记（注意，在一些非IE浏览器中，并不支持div标记）因其使用的灵活性和方便性而做为我们的选。上例使用的就是div标记。

好啦，基本的过程，上面大致已经说完了，在下一章，我们将看到使用上面提到的技术来实现一个简单的菜单。

模拟网页下拉菜单中有几个比较关键的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属性：

background-color：背景色，其值为一个颜色值，如“#FF0000”、“red”。

border：边框样式，一个形如“宽度样式颜色”的字符串，如“1px solid red”，即1px的红色实线边框。

cursor：鼠标指针样式，取值为表示鼠标指针样式的字符串，如“hand”、“help”，即小手、帮助状态。

以上只是简单的介绍了几个在此类菜单中非常常见的CSS属性，这里也并未做很详尽的解释（毕竟这些并不是我们要讲解的重点），欲了解更多可参阅相关资料。笔者在这里想说的是：掌握更多的CSS属性会对你有所帮助。

前面说了，美化主要表现在鼠标放到菜单上后的效果，那么如何用javascript来控制样式的变化呢？或者你会想到前面讲过的style对象，的确，用style可以达到目的，但是，很多时候，需要改变很多个CSS属性，用style就显得有些麻烦。我们再来介绍一个新的属性：className。

className属性对应的就是CSS的class，也即所谓的伪类，比如在某个标记中设置class=myName，那么这时该元素的className属性就是myName。

来看下面这个例子：

--------------------------------------------<span onmouseover="this.className='style_over'"onmouseout="this.className='style_normal'">鼠标移上来，通过className属性改变这段文字的class，使文字颜色变成红色；移走，又恢复原来的颜色。</span>----------------------------------------------
　　

我们看到，在处理相对复杂的样式变化的情况下，用className就方便得多了，至于样式如何变化，就变成如何定义class的问题了。

讲到这里，我想有一定CSS基础的朋友应该已经清楚如何来修饰这个菜单了，即便你对CSS了解的还不多，前面已经介绍了几个较常用的属性。所以，这里就不再多讲了

通过前三篇文章的讲解，现在我们已经可以实现一个基本的菜单了。这一章，我们来讨论一下定位的问题。

在前几章讲的例子中，定位都是相对于整个网页的左上角。在有一些时候，我们可能需要它相对于网页中某个元素定位，这样做在某些时候是非常有必要的，比如不会出现那种因窗口大小的改变而致使菜单与网页中的一些元素的相对位置发生变化。在第一章的最初，笔者所给的例子中就是这样做的。

在那里我们很方便把就把这个菜单插入到了网页中，而菜单不会相对菜单按钮的位置发生变化。下面我们就看看如何来实现。

在第一章，我们讲过position，当它取值absolute的时候，即绝对定位。既然是定位，就要有参照物。一般来讲，这个定位的参照物是body（即整个网页）的左上角，但如果其父级元素中有设置了position:absolute的元素，那么它的参照物就是该元素。知道了这样一个特性，我们就可以很容易的来实现了。

另外，有一点在这里必须要着重说明一下，前面同时也讲过，当position的值为relative时，就是相对定位，为什么不用它来实现呢？我们必须要正确理解这里所谓的相对定位：它是指相对于原来在HTML中的位置所发生的偏移，而它仍占据原来在HTML中所占据的位置。而我们现在的菜单需要“悬浮”在网页元素之上，而这只有当position设为absolute时才可以做到。

通过上面的讲述，我们应该可以大致的了解其实现的原理了。下面就看看刚才在上面看到的那个菜单的代码（注意里面的注释会帮你加深理解）。

-------------------------------------------------------------------------------
<div onmouseover="myMenu.style.display='block'"onmouseout="myMenu.style.display='none'"> Link 1<br> Link 2<br> Link 3<br> Link N<br> 菜单实例-------------------------------------------

请仔细理解上面的代码，相信大家对用CSS进行绝对定位会有一个更深层次的认识！

这里说一句题外话：这种定位可以用Dreamweaver来实现（这对于对JS不是很熟的朋友来讲的确很方便），而事实上这样做生成的代码的原理与上面讲的相同的。把上面讲的原理弄清楚了，使用起来会更灵活。

本文标题：网页菜单详解：基本原理
当前地址：https://www.cdcxhl.com/news6/74406.html

成都网站建设公司_创新互联，为您提供静态网站、网页设计公司、网站维护、网站改版、建站公司、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容