商业源码 求关于下拉框的代码！！
代码：
效果图：
代码含义：
<Option>定义下拉列表数据标签
<Value> 定义传输的定
实现原理：
通过代码<select>设置一个下拉列表菜单，<option>设计下拉菜单下面的值来达成效果。
代码源件：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<form action="" method="get">
<label>下拉列表菜单</label>
<select>
<option value="0">下拉选项1</option>
<option value="1">下拉选项2</option>
</select>
</form>
</body>
</html>
在当下网页结构当中，导航的菜单栏占据了一个很重要的位置，因为不仅仅可以展示示例，还可以给你对于内容最直观的印象，众所周知的是在html中<ul><li></li></ul>可以对菜单进行分级，那么我们可以配合css3实现导航下拉菜单。本篇文章给大家带来的内容是关于如何使用css3实现导航下拉的菜单，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用css3实现导航下拉菜单的原理
首先要使用HTML当中的<ul><li></li></ul>进行菜单的制作，然后我们会用到一个hover语句，即鼠标悬停在某个区域内的时候，触发下级菜单的显示，其中需要了解到的是display的属性，我们将会使用block和none的属性实现下拉菜单的出现和隐藏。然后我们会给各个菜单定义position来确定菜单的位置，最后使用::after伪元素选择器来清除浮动。
使用css3实现导航下拉菜单的步骤
步骤一：利用HTML制作出菜单样式
<nav>
<ul>
<li><a href="#">导航一</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a>
<ul>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
</ul>
</li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航四</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航五</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航六</a></li>
</ul>
</nav>步骤二：利用css3实现鼠标悬停触发的下拉菜单
nav {
margin:100px auto;
text-align:center;
}
nav ul {
border-radius:10px;
background:linear-gradient(to bottom,#efefef,#bbbbbb);
padding:0 20px;
display:inline-table;
position:relative;
box-shadow:1px 1px 3px #666;
}
nav ul ul {
display:none;
}
nav ul li {
float:left;
}
nav ul::after {
content:"";
display:block;
clear:both;
}
nav ul li a {
display:block;
padding:25px 40px;
color:#000;
text-decoration:none;
font-family:"微软雅黑";
}
nav ul li:hover > ul {
display:block;
}
nav ul li:hover {
background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
color:#FFF;
}
nav ul ul {
background:#5f6975;
border-radius:0;
position:absolute;
top:100%;
padding:0;
}
nav ul ul li {
float:none;
border-top:1px solid #6b727c;
border-bottom:1px solid #575f6a;
}
nav ul ul li a {
color:#FFF;
}
nav ul ul li a:hover {
background:#4b545f;
}
nav ul ul ul {
width:100%;
position:absolute;
left:100%;
top:50%;
}步骤三：根据菜单样式的要求进行美化
下拉菜单样式如图所示
给你个例子，里面的数据自己改下
==============================
<html>
<head>
</head>
<body>
<script language="JavaScript">
<!--
//第一维:第一个下拉列表的值
//第二维:表示下拉列表中看到的字符串
//第三维:表示下拉列表中的值
var subcat = new Array();
//如果大类的值是动态的,则可以通过数据库中取出作如下设置
//subcat[<%=count%>] = new Array('<%=trim(rs("leemaid"))%>','<%=rs("leemaconte nt")%>','<%=rs("leemacontent")%>');
subcat[0] = new Array('1','电视机','=1')
subcat[1] = new Array('1','电风扇','=2')
subcat[2] = new Array('1','电饭煲','=3')
subcat[3] = new Array('1','电炒锅','=4')
subcat[4] = new Array('1','电灯','=5')
subcat[5] = new Array('1','电脑','=6')
subcat[6] = new Array('1','电冰箱','=7')
subcat[7] = new Array('1','洗衣机','=8')
subcat[8] = new Array('1','微波炉','=9')
subcat[9] = new Array('1','VCD影碟机','=1')
subcat[10] = new Array('2','二极管','=11')
subcat[11] = new Array('2','三极管','=12')
subcat[12] = new Array('2','CMOS集成块','=13')
subcat[13] = new Array('2','电阻','=14')
subcat[14] = new Array('2','电容','=15')
subcat[15] = new Array('2','整流二极管','=16')
subcat[16] = new Array('2','整流桥','=17')
subcat[17] = new Array('2','可控硅','=18')
subcat[18] = new Array('2','电子枪','=19')
subcat[19] = new Array('2','光敏二极管','=2')
subcat[20] = new Array('3','ffffff','vvvvvv')
subcat[21] = new Array('3','dddddd','ffffff')
function changeselect1(selectValue)
{
documentform1s2length = 0;//初始化下拉列表 清空下拉数据
//documentform1s2options[0] = new Option('请选择二级小类','');//给第一个值
for (i=0; i<subcatlength; i++)//legth=2
{
if (subcat[i][0] == selectValue)//[0] [1] 第一列 第二列
{
documentform1s2options[documentform1s2length] = new Option(subcat[i][1], subcat[i][2]);
}
}
}
//-->
</script>
<form name="form1">
二级联动：
<select name="s1" onChange="changeselect1(thisvalue)">
<option>请选择一级大类</option>
<option value="1">家用电器</option>
<option value="2">电子元器件</option>
<option value="3">ddddd</option>
</select>
<select name="s2" onChange="alert(thisvalue)">
<option>请选择二级小类</option>
</select>
</form>
</html>
0条评论