html代码如下：
<form action="" method="get">
<label>1、普通下拉列表菜单</label>
<select name="">
<option value="0">DIVCSS5</option>
<option value="1">DIVCSS5</option>
</select>
</form>
2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）
常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单html代码如下：
<form action="" method="get">
<label>2、跳转的下拉列表菜单</label>
<select name="jumpMenu" id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)">
<option value="http://www.Rothur.com/">Rothur</option>
<option value="http://www.Rothur.com/">Rothur</option>
</select>
</form>
实现跳转还需要在head标签内加入Js脚本动作代码：
<script type="text/javascript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'") if (restore) selObj.selectedIndex=0 } //--> </script>
【方法步骤】：
写好HTML代码以实现下拉菜单。
在网页上看到初步效果。
添加JavaScript代码实现功能，hide（）函数实现display的隐藏。
在HTML代码中引用show()和hide()函数。
CTR+S保存代码，在浏览器中F5刷新网页查看效果。
【其他方法】：
利用Html5+css实现的下拉菜单炫酷效果。<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0
padding: 0
}
#nav{
background-color: #EEEEEE
height: 40px
<!DOCTYPE html>。
使用JavaScript实现下拉菜单的效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
通过JQuery方法实现的下拉菜单的炫酷效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
【注意事项】：记得CTR+S常记得保存的备份，F5刷新网页。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）