导航:首页 > 万维百科 > 网页设计js做下拉菜单

网页设计js做下拉菜单

发布时间:2020-11-15 08:53:22

1、网页设计:下拉列表的问题,

刚试着做了一下,你看可以不?(需要引入jquery.js)<!doctype HTML>
<html>
<head>
<title></title>
</head>
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#startQuarter").change(function(){
$val = $(this).find("option:selected").val();
$str = "";
for (var i = $val; i <= 4; i++) {
$str += "<option value='"+i+"'>Q"+i+"</option>"
};
$("#endQuarter").html($str);
});
});
</script>
<body>
<table>
<td class="fieldLabelArea" width="15%">Start Quarter:</td>
<td class="fieldValueArea" bgcolor="#ffffff" width="35%">
<select name="startQuarter" id="startQuarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
</td>
<td class="fieldLabelArea" width="15%">End Quarter:</td>
<td class="fieldValueArea" bgcolor="#ffffff" width="35%">
<select name="endQuarter" id="endQuarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
</td>
</table>
</body>
</html>

2、JS编写网页联级下拉菜单

用CSS UL LI标签可以轻松实现,一般这种要设置样式的下拉,都是采用CSS+JS实现的

3、网页设计中,怎么实现利用层实现制作下拉菜单? 要详细步骤。

这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码

4、网页设计下拉菜单项

showmenu就是显示某个菜单,showmenu('scripting')",就是显示ID为'scripting'的菜单项,hidemenu就是隐藏某个菜单hidemenu('scripting')" ,就是隐藏ID为'scripting'的菜单项

5、网页制作下拉列表菜单的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<form NAME="myform1" action="index2.htm">
<div align="center"><center>
<p>     
<select name="d" size="1">
<option selected="selected" value="选项 ">女生座</option>
<option value="1">白羊座</option>
<option value="2">双鱼座</option>
</select>
     vs   
<select NAME="d" SIZE="1">
<option selected value="选项 ">男生座</option>
<option value="3">白羊座</option>
<option value="4">双鱼座</option>
</select>
   
<input name="Submit" TYPE="submit" onClick=".HTM" VALUE=" go "> </p>
</center></div>
</form>

<p> </p>
</body>
</html>

6、大一学网页设计的, 自己试着做了网页的头部,可是用javascript做下拉菜单的时候出现问题了

给主菜单固定的宽度。再给子菜单的每一项。设CSS为 display:inline-block

7、网页制作,慢慢下拉的菜单怎么做?

这个效果你可以通过2中途径实现,使用框架或者是使用JavaScript代码。

1.使用框架:查找框架中的二级菜单组建,如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子


<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

详细内容参见http://v3.bootcss.com/components/#navbar

2.使用JavaScript代码。使用jQuery的动画实现,如slideToggle()可使元素上下滑动,并且可以使用参数控制快慢。

<script>
//ID menu是点击的以及菜单,触发的是点击事件,当然可以换成hover事件,ID submenu是二级菜单层。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()请参考http://www.w3school.com.cn/jquery/jquery_slide.asp

8、html网页下拉菜单设计问题

left: -999em 应该是无限的向左缩进吧 你又写了left:5px; 应该是和其他的样式表属性有冲突仔细检查下吧 用firebug 很简单的说

9、用js做网页下拉菜单缓慢向下的特效代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
$("nav").onclick = function(e){
var src = e?e.target:event.srcElement;
if(src.tagName == "H3"){
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display =="block")?"none":"block";
}
}
}
</script>
</head>
<body>
<div id="nav">
<h3>管理区</h3>
<div>
<a href="#">建议</a>
<a href="#">链接</a>
<a href="#">联系</a>
</div>
<h3>交流区</h3>
<div>
<a href="#">JavaScript</a>
<a href="#">Delphi</a>
<a href="#">VC++</a>
</div>
</div>
</body>
</html>

10、网页制作 html,js搜索中的下拉菜单是怎么出来的

将一个DIV的position样式设置为absolute, display样式设置为none;
文本框的版权onpropertychange事件中使用JS将DIV的display样式设置为block
DIV数据通过Ajax填充.
document对象的onclick事件中使用JS将DIV的display样式设置为none
简单说这就是实现原理.

与网页设计js做下拉菜单相关的知识