導航:首頁 > 萬維百科 > 網頁設計怎麼讓二級下拉列表

網頁設計怎麼讓二級下拉列表

 發布時間：2020-11-12 12:41:35

1、Web程序設計二級下拉菜單頁面怎麼做

W

2、jsp怎樣設置二級聯動的下拉列表

jsp設置二級聯動的下拉列表的例子如下：

<html>
<head>
<title>This is a test!</title>
</head>
<body>
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>請選擇</option>
<option value="1">腳本語言</option>
<option value="2">高級語言</option>
<option value="3">其他語言</option>//下拉列表數據
</select>

<select name="s2">
<option value="請選擇" selected>請選擇</option>
</select>
</form>
<script language="javascript">
//獲取一級菜單長度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);
//把一級菜單都設為數組
for (i=0; i<select1_len; i++)
{ select2[i] = new Array();}
//定義基本選項
select2[0][0] = new Option("請選擇", " ");

select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");

select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", " ");
select2[2][2] = new Option("C#", " ");

select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");
//聯動函數
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{ temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
temp.options[0].selected=true;
}
</script>
</body>
</html>

3、怎麼製作第一級，第二級下拉菜單

打開一個Excel，我們要在性別這一列中設置一個下拉菜單，內容為「男」「女」

選中姓名後面所對著的「性別」單元格

依次打開「數據」—「有效性」

在新出來的對話框中，打開「設置」選項卡，「允許」中選擇「序列，在「來源」中輸入「男,女」，此處注意，「男,女」之間的逗號為英文逗號。然後勾上「忽略空置」和「提供下拉箭頭」。點擊確定即可
確定之後，你就可以看到，在「性別」這一列下，都出現了「男,女」下拉菜單

4、網頁設置的DIV+CSS二級下拉菜單，為什麼沒出現？

.menu{margin-top:1px;position:relative;width:100%;float:left;background:url(../images/menu_bg.gif) repeat-x;height:40px;} .menu table{position:absolute; top:0; left:0;} .menu ul{list-style:none;margin:0;padding:0;} .menu ul li{width:105px;float:left;text-align:center;font-size:12px;position:relative;background:url(../images/menu_jiange.gif) no-repeat right center;font-weight:bold;} .menu ul li a{display:block;color:#fff;display:block;height:40px;line-height:40px;z-index:100;} .menu ul li a:hover{color:#ffee00;background:url(../images/menu_bg.gif) no-repeat;text-decoration:underline;} .menu ul li ul{visibility:hidden;position:absolute;background:url(../images/sub_menubg.gif) bottom center;border-bottom:none;z-index:100;top:40px;left:0px;} .menu ul li:hover ul,.menu ul a:hover ul{width:103px;visibility:visible;color:#fff;border:1px solid #ffb569;border-top:none;} .menu ul li:hover ul li,.menu ul a:hover ul li{width:103px;float:left;background:url(../images/su_bmenu_bottombg.gif) no-repeat bottom center ;height:30px;} .menu ul li:hover ul a,.menu ul a:hover ul a{height:30px;color:#fff;font-size:12px;font-weight:normal;text-align:left;text-indent:20px;} .menu ul li:hover ul a:hover,.menu ul a:hover ul a:hover{color:#ff0000;background:#f5f9d1;display:block;font-weight:normal} .menu ul li:hover ul li a,.menu ul a:hover ul li a{top:0;left:0;line-height:30px;} .menu ul li:hover ul li.last{} .menu ul li.last{background:none;} <div class="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關於我們 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">公司簡介</a></li> <li><a href="#">公司優勢</a></li> <li><a href="#">團隊風采</a></li> <li><a href="#">榮譽展示</a></li> <li class="last"><a href="#">代言人介紹</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">新聞中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">公司新聞</a></li> <li><a href="#">行業新聞</a></li> <li class="last"><a href="#">最新公告</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">家用產品中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">紅福系列</a></li> <li><a href="#">紅運系列</a></li> <li><a href="#">紅瑞系列</a></li> <li class="last"><a href="#">紅泰系列</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">熱水工程中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">工程概述</a></li> <li><a href="#">解決方案</a></li> <li><a href="#">工程案例</a></li> <li><a href="#">工程配件</a></li> <li class="last"><a href="#">工程合作預約</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">客戶服務中心 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">服務理念</a></li> <li><a href="#">科普知識</a></li> <li><a href="#">維修保養</a></li> <li class="last"><a href="#">售後服務</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">人力資源 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">人才理念</a></li> <li><a href="#">招聘信息</a></li> <li class="last"><a href="#">在線應聘</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#">經銷商專區 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">加盟中心</a></li> <li class="last"><a href="#">經銷商下載</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="last"><a href="#">聯系我們 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#">聯系方式</a></li> <li><a href="#">在線留言</a></li> <li class="last"><a href="#">在線加盟</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 用這個吧，IE6,7,FF兼容

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>無標題文檔</title>
<style>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}

.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}

</style>
<script>
// JavaScript Document

function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>

<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何銷售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采購</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服務</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商業資訊</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展會幫助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">廣告幫助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>

</div>

</div>
</body>
</html>

這個拿去參考一下吧~~

6、導航下拉菜單（二級分類）怎麼弄

首先我們先來確定一下要做到什麼樣才能到達自己想要的效果，而在修改之前我們先來看一下目標吧！這樣方便接下來的修改：

想要看到效果首先就是現在後台添加好一級欄目和二級欄目，這樣做出更改以後才能看到效果。打開後台---登錄---選擇左上方界面----導航設置---添加主導航---添加二級導航

最終的效果就是添加一個主導航然後再在主導航里添加兩三個二級導航，這樣在你接下來的修改才能看到明顯的效果。

這一步就是設置二級導航的樣式，也就是圖片的箭頭所指的位置，這里可設置成1、菜單樣式，2、橫排樣式，兩種效果，這兩種效果具體什麼樣的我就不說了，在這主要是圖片中框中的，這里最好有鏈接，加上鏈接後樣式文件中的a才能起到相應的效果：

做完第四步後更新一下緩存，到前台刷新一下就能看到效果了。但是你很可能選擇橫排發現沒效果，但是不用擔心，這個問題你可以去源碼中實現，找到common.css文件（圖片中已經顯示中去那些文件夾里找）

然後用DW打開文件（如果你不知道這個軟體就用記事本打開也行），用查找工具找到 .p_pop li 然後在後面的括弧內加上： float:left; border-right:1px solid #666; padding-left:5px; padding-right:5px;

做到這一步基本上就完成了，如果你還想要加一下自己想要的效果的話可以在圖片中的代碼中更改，絕對能達到你想要的效果的（前台你懂那些代碼）。

7、html頁面怎麼實現二級下拉菜單

現在我們為nav添加樣式,首先去掉默認的margin和padding，再去掉<ul>< li>標簽的list-style樣式和<a>標簽的默認下劃線。接下來再添加適當的樣式（根據實際需要添加）進行美化，如一下樣式：
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>
打開頁面預覽效果

8、網頁製作中，如何做二級菜單（就是滑鼠滑過去才有顯示）

你說的是把滑鼠擱置在某個控制項上停留一會，然後彈出快捷菜單嗎？

其實我無形中已經告訴你辦法了，滑鼠事件選擇「載入」或者「顯示」，事件代碼就是「彈出快捷菜單」並寫上快捷菜單顯示內容

9、html 如何做一個二級聯動的下拉表單(select)

<! html><html><head><meta charset="utf-8"><title>聯動</title></head><body><select id="s1" onChange="move()"><!-- 根據id獲取value，onchange（）觸發函數move（）修改二級select的text值實現聯動 -->
<option selected value="s1">-- 請選擇 --</option>
<!--默認選中-->
<option value="SC">SC</option>
<option value="BJ">BJ</option>
<option value="TJ">TJ</option></select><select id="s2">
<option selected>-- 請選擇 --</option>
<!--默認選中，動態生成option --></select><script>
function move()
{
var s1=document.getElementById("s1"); var s2=document.getElementById("s2"); <!-- 獲取一級和二級的屬性-->
var add;
if(s1.value=="SC")
{
add=new Array("CD","DZ","MY","NC"); <!--比對value值，實現對應二級text值的動態生成-->
}else if(s1.value=="BJ")
{
add=new Array("HD","CY","WFJ");<!--比對value值，實現對應二級text值的動態生成-->
}else if(s1.value=="TJ")
{
add=new Array("TJG","TJ","TJY"); <!--比對value值，實現對應二級text值的動態生成-->
}else if(s1.value=="s1")
{
add=new Array("請選擇");
}
else
{
add=null; <!--若沒有就為空，當然不可能出現的-->
}

s2.length=0;
for(var i=0;i<add.length;i++) { var ss=new Option(); ss.text=add[i].split()[0];

s2.add(ss);
<!--把text值添加到二級select中，顯示出來-->
}

}</script></body></html>

與網頁設計怎麼讓二級下拉列表相關的知識