日期:2013-11-29 浏览次数:20903 次
一、下拉式选择框
这两个示例,外观方式有所不同,但都是用了<select>和<option>标记做出来的,只是设置了不同的参数而已。比较一下它们的源代码,就明白了:
左边的菜单源代码:
<select name="select" size="4" multiple>
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3" >黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
左边的下拉菜单代码:
<select name="select2" size="1">
<option value="1" selected>选择旅游线路</option>
<option value="2">黄山二日游</option>
<option value="3">黄山精华游</option>
<option value="4">黄山精品游</option>
<option value="5">黄山四日游</option>
</select>
从上面的源代码中可以看出,两个菜单的所有<option>标记的参数设置均相反,所不同的是左边菜单在<select>标记中设置了size="4",从而使得它一次可以显示四个菜单项。另外,它还设置了multiple参数,从而使得在该菜单上可以选择多项,在选择多项时要同时按下“shift”键。
二、制造导航菜单
这个例子从外观上看与上例没有什么区别,但当你用鼠标点出下拉出的菜单项后,却能链接到相应的网页,也就是说,它是一个名符其实的下拉式导航菜单了,先看看它的源代码有什么变化:
<select name=D1 size=1 >
<option selected value="村夫站导航">村夫站导航</option>
<option value="http://go.163.com/~fym888/home.htm">村夫家</option>
<option value="http://go.163.com/~fym888/dwyd.htm">DW 园地</option>
<option value="http://go.163.com/~fym888/flashyd.htm">Flash园地</option>
<option value="http://go.163.com/~fym888/pageabc.htm">网页ABC</option>
<option value="http://go.163.com/~fym888/download.htm">文章下载</option>
</select>
从上面的代码中可看出,value的值中与上例不同,不再是数字,而是网页URL地址,这样一旦你选择一个菜单就相当于获得一个网页地址,但仅有网页地址是不够的。在本例中关键的是这一行代码: 这句代码的作用是,一旦选择项发生改变,立即从当前被选择的菜单中获得网页的地址,并链接到这个地址,从而保证了导航功用的实现。