中科新闻网陈式小架太极拳网:如何网页中制作动态下拉选项
来源：百度文库 编辑：中科新闻网 时间：2024/05/10 22:28:56
用asp+DW
把以下代码存为.htm的就行了。
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
menuPrefix = 'menu'; // Prefix that all menu layers must start with
// All layers with this prefix will be treated
// as a part of the menu system.
var menuTree, mouseMenu, hideTimer, doHide;
function init() {
ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;
document.onmousemove = mouseMove;
if (ns4) { document.captureEvents(Event.MOUSEMOVE); }
}
function expandMenu(menuContainer,subContainer,menuLeft,menuTop) {
// Hide all submenus thats's not below the current level
doHide = false;
if (menuContainer != menuTree) {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if ((menuLayers[i].id.indexOf(menuContainer) != -1) && (menuLayers[i].id != menuContainer)) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if ((menuLayer.id.indexOf(menuContainer) != -1) && (menuLayer.id != menuContainer)) {
menuLayer.visibility = "hide";
}
}
}
}
// If this is item has a submenu, display it, or it it's a toplevel menu, open it
if (subContainer) {
if ((menuLeft) && (menuTop)) {
positionObject(subContainer,menuLeft,menuTop);
hideAll();
}
else {
if (ie4) {
positionObject(subContainer, document.all[menuContainer].offsetWidth + document.all[menuContainer].style.pixelLeft - 10, mouseY);
}
else {
positionObject(subContainer, document.layers[menuContainer].document.width + document.layers[menuContainer].left + 50, mouseY);
}
}
showObject(subContainer);
menuTree = subContainer;
}
}
function showObject(obj) {
if (ie4) { document.all[obj].style.visibility = "visible"; }
else if (ns4) { document.layers[obj].visibility = "show"; }
}
function hideObject(obj) {
if (ie4) { document.all[obj].style.visibility = "hidden"; }
else if (ns4) { document.layers[obj].visibility = "hide"; }
}
function positionObject(obj,x,y) {
if (ie4) {
var foo = document.all[obj].style;
foo.left = x;
foo.top = y;
}
else if (ns4) {
var foo = document.layers[obj];
foo.left = x;
foo.top = y;
}
}
function hideAll() {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if (menuLayers[i].id.indexOf(menuPrefix) != -1) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if (menuLayer.id.indexOf(menuPrefix) != -1) {
hideObject(menuLayer.id);
}
}
}
}
function hideMe(hide) {
if (hide) {
if (doHide) { hideAll(); }
}
else {
doHide = true;
hideTimer = window.setTimeout("hideMe(true);", 2000);
}
}
function mouseMove(e) {
if (ie4) { mouseY = window.event.y; }
if (ns4) { mouseY = e.pageY; }
}
function itemHover(obj,src,text,style) {
if (ns4) {
var text = '<nobr><a href="' + src + '" class="' + style + '">' + text + '<\/a><\/nobr>'
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}
onload = init;
//-->
</SCRIPT>
<style type=text/css>
<!--
.menu { position: absolute; left: 0; top: 2;
visibility: hidden; background: #FFFFFF;
width: 100px; margin: 0px 0px; padding: 0px 0px;
border: 1px silver solid;
overflow: visible; ; clip: rect( )}
.menu a:visited { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; line-height: 22px; border-color: #FFFFFF #666666 #333333 #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; clip: rect( )}
.menu a:hover { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: #FFFFFF; background: #009900;
width: 108px; padding-left: 8px; ; line-height: 22px; clip: rect( )}
.menu .border { border: 1px solid #F4F4F4;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080; }
.menu .text { overflow: hidden;
width: 125px; height: 15px; }
.menu .arrow { overflow: hidden;
width: 15px; height: 12px;
padding-left: 5px; padding-top: 3px; }
.menu .arrow img { width: 6px; height: 7px;
border: 0px; } .menu a { font-family: "Tahoma"; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 108px; padding-left: 8px; ; clip: rect( ); border-color: #FFFFFF #666666 #333333 #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; line-height: 22px} .menu a:link { color: #000000; text-decoration: none}
.a { font-size: 12px; text-decoration: none}
a:link { color: #FFFFFF; text-decoration: none}
a:hover { text-decoration: underline}
a:visited { color: #FFFFFF; text-decoration: none}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#333333" width="778" class="a">
<tr bgcolor="#009830" align="center" valign="bottom">
<td width="10" height="18"> </td>
<td width="74"><a href="#;" onMouseOver="expandMenu(null,'menu1',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第一项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu2',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第二项</a></td>
<td width="58"><a href="#;" onMouseOver="expandMenu(null,'menu3',getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight);" class="a" >第三项</a></td>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<td width="40"><a href="#;" class="a" >首页</a></td>
<td width="18" height="18"> </td>
</tr>
</table>
<script language="JavaScript">
function getPos(el,sProp) {
var iPos = 0
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos
}
</script>
<!-- 第一开始 -->
<div id="menu1" class="menu" onMouseOut="hideMe();" style="">
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
<a href="#;" onMouseOver="expandMenu('menu1');">第一项</a><br>
</div>
<!-- 第二开始 -->
<div id="menu2" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
<a href="#;" onMouseOver="expandMenu('menu2');">第二项</a><br>
</div>
<!-- 第三开始 -->
<div id="menu3" class="menu" onMouseOut="hideMe();">
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
<a href="#;" onMouseOver="expandMenu('menu3');">第三项</a><br>
</div>
<!--可以复制上面的做出menu4 menu5 menu6....-->
<p class="a"> </p>
</body>
</html>
能够自己亲手做出一个漂亮的动态下拉菜单是许多主页制作者一个愿望，最早只能通过分析别人的代码，然后进行手工改动来实现。有了等可视化制作工具，可以通过对层的消隐移动控制来实现。现在，有了这个的插件，直接就可以生成一个动态下拉菜单（菜单的实现如图）。动态效果参见这里。
这个插件是一个以mxp为后缀的文件，对于这类插件，不是象以往的插件那样通过把一个文件解到相应的目录下后进行使用，不需要时再手工删除。现在它是通过一个扩展管理器来对插件进行管理，在需要时进行添加，不需要时随时卸载。对于用惯苹果机的字体管理器的朋友对这个概念肯定非常熟悉，用它可以轻松地管理上百个甚至上千个插件，再也不用为要记住哪个插件在哪个目录下发愁了。当然，要使用插件必须先安装扩展管理器，安装的方法很简单，直接双击运行，然后按照提示进行选择目录就可以了。扩展器安装完毕后，会在”（管理扩展）命令，点击它后执行，就可以利用工具栏上的安装来对插件进行管理，需要指出的是，这里的卸载并不是真正地删除这个插件，而是暂时禁用，随时可以再通调入使用的。有了扩展管理器后，安装插件的方法就非常简单了，双击这个文件，扩展管理器就会自动运行，把它装到中，然后再启动，看看面版，多了点什么东西？在第一项多出来一个样的按钮，这就是按钮。文档，单击按钮，系统弹出对话窗口，在设置窗口中可以针对这个动态下拉菜单进行设置。各参数的含义如下：：设置你需要的主菜单数目。：第一个主菜单离浏览器上方的距离。：主菜单离浏览器左方地距离。：下拉出来的二级菜单是否在主菜单的正下方，如果不是，偏离多少。此项为表示二级菜单在主菜单正下方，正数是二级菜单向右偏，负数是二级菜单向左偏。：菜单下拉时运动的速度，数值越大运动越快。：点击已经展开的主菜单时，是否把二级菜单关闭。设置不同的参数，可以得到不同的下拉效果，大家可以多实验几次，就可以掌握这些参数的意义。设置完参数后，单击按钮，就可以插入一个下拉菜单。中插入了一系列的层，层的排列顺序是：第一个主菜单，第一个主菜单的子菜单，第二个主菜单，第二个主菜单的子菜单……根据这个顺序，可以分别对这些层进行编辑，输入自己想要在菜单上显示的文字，并在文字属性的一栏加上这个菜单的超链接。经过一阵重复的输入工作后，这个动态下拉菜单就作成了，得意地欣赏欣赏你的大做吧。：）值得提出的是，这个插件不仅可以做出文字型的下拉菜单效果，还可以通过插入图像做出更“酷”的效果，使用方法是首先把文字替换成图片，然后在主菜单的图像上设置，可以在“。然后在弹出的菜单中选择需要展开的第一个子菜单的序号，以及菜单展开的速度。把所有的主菜单图像设置完毕后，就可以看看这个专业级的导航菜单了。插件都可以免费下载的，大家可以到上下载，如果对这个插件的使用有任何疑问，也欢迎到上讨论，或者给我发邮件：。
使用 onchange函数
答得文不对题
创建两个文本域表单
表单1为省份调取省份数据表 表单2为城市调取城市数据表
表单之间关系通过指定自定义ID或字段名传值来实现动态选择
TMD,有些纯粹就是在瞎整，不懂就不要乱说嘛，简直就是想混分的嘛。
随心可乐,你厉害！