
首先看这下面的例子(鼠标移上去):
Link 1
Link 2
Link 3
...
Link N
菜单实例
类似这样的仿Windows下拉菜单,在网上是比较常见的,最初出现在微软网站上,之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事,比如上面的例子代码如下:
------------------------------------------- Link 1
Link 2
Link 3
...
Link N
菜单实例----------------------------------- 那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。
在讲解之前,有一点需要说明的是:笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer(即我们通常所说的IE)下的。笔者进行调试的浏览器是IE 5.01。另外,这样一个菜单体现的是HTML/CSS/JavaScript的综合应用,这里并不对一些细节进行详细的讲解,所以你至少应该有一点这方面的基础。
基本原理 其实,这个菜单实现的原理简单的说就是:设置页面元素的CSS属性,对其进行定位并设置其是否可见,然后通过激发一定的事件,用JavaScript来动态的改变这些属性。
看下面几个CSS属性:
positimyMenu.style.display=''block''"”就是一个很普通的用法,其中myMenu即我们所看到的“菜单”的ID,它原来的display为none,即不显示,当鼠标移上去时,变为block,即块状显示。
另外要提的是:前面只说了如何实现定位、如何动态控制,那么定位的、控制的是什么元素呢?原则上来讲,大部分块状元素(如div、table)都可以,而在IE中,div标记(注意,在一些非IE浏览器中,并不支持div标记)因其使用的灵活性和方便性而做为我们的首选。上例使用的就是div标记。
好啦,基本的过程,上面大致已经说完了,在下一章,我们将看到使用上面提到的技术来实现一个简单的菜单。
无忧站长学院,建站自然无忧www.5ucms.org