CSS样式用好表单的下拉式菜单

　　一、下拉式选择框

　　这两个示例，外观形式有所不同，但都是用了<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 onchange="location.href=this.options[this.selectedIndex].value" 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地址，这样一旦你选择一个菜单就相当于获得一个网页地址，但仅有网页地址是不够的。在本例中关键的是这一行代码：onchange="location.href=this.options[this.selectedIndex].value" 这句代码的作用是，一旦选择项发生改变，立即从当前被选择的菜单中获得网页的地址，并链接到这个地址，从而保证了导航功能的实现。

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18