在网页中制作弹出式菜单
在编制网页的过程中,我们经常会用到一些javascript及层的概念。这次
我就是要用这两个不同的知识来制作弹出式菜单。具体的效果是:在你的网页中
有若干个选项(我们不妨称它为母选项),然后每个选项中又有若干个的选项(
我们称它为子选项)。那么,我们就是在你点击母选项时,就弹出相对应的子选项
菜单,然后在弹出的菜单中再链接到你想要去的地方;在你点击另外一个母选项时,
刚才弹出的那个菜单就隐藏掉,而弹出与之相对应的菜单。
下面我们看具体的做法:(这里以两个母选项为例,多个的话情况相仿)
首先写一个函数,把要弹出的菜单都初始化为隐藏的。
function hidestyle()
{
change1.style.visibility='hidden';
change2.style.visibility='hidden';
}
(其中num为你的程序中母选项的个数)
第二,写一个函数,实现点击某一母选项是,前面的母选项对应的菜单消失,
而弹出它相应的菜单。
function filter_me1()
{
change1.style.backgroundColor='#D19661';
change1.filters(0).Apply();
change1.filters(0).Play();
change1.style.visibility='visible';
change2.style.visibility='hidden';
}
(其中定义要弹出相对应的第一个母选项的菜单的函数为filter_me1()
那么,可以相仿地定义相对应的第二个母选项的菜单的函数为filter_me2() )
第三,在母选项上加上链接比如:
< a href=# onClick="filter_me1();">例子1< /a>
< a href=# onClick="filter_me2();">例子2< /a>
这样,在点击例子1时,就弹出对应于例子仪一的菜单;点击例子二时,就弹出对应于例子二的菜单。
第四,在相对应的地方建立层:
< div id="change1" style="position: absolute; left: 30; top: -188; width: 96; height: 267;
filter: revealTrans(Duration=0.8, Transition=23); border: 1 solid #FFFFFF">
< a href="11.html">例子1.1< /a>< /div>(其中left,top,width,height,border的属性大家都知道,
revealTrans(Duration=0.8,Transition=23)
其中两个参数分别指的是弹出菜单的持续时间和转换过程.)
只要把这两个函数放到< script language="javascript">和< /script>之间就行了,住一把这个
script放到< head>和< /head>之间.
好了,现在你也可以在自己的主页上试一试弹出式菜单的效果了