導航:首頁 > 萬維百科 > 網頁設計二級菜單怎麼寫

網頁設計二級菜單怎麼寫

 發布時間：2020-09-14 13:56:32

1、html二級菜單怎麼做

首頁我們打看dreamweaver或其它編輯器，創建一個名為nav的導航菜單
<div class="nav">
<ul>
<li><a href="#">欄目一</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目三</a></li>
<li><a href="#">欄目四</a></li>
<li><a href="#">欄目五</a></li>
</ul>
</div>
如下圖所示：

2
現在我們為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>
打開頁面預覽效果

3
像這樣，一個菜單橫向菜單就建好了，下來我們給欄目一，欄目二，欄目三，添加二級下拉菜單
<div class="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>
<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>
<ul>
<li><a href="#">二級欄目</a></li>
<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></li>
</ul>
</div>

4
添加完二級欄目後，現在我們開始添加css樣式，首先給<li>標簽下的<ul>標簽添加相對定位，再去除之下<li>標簽的做浮動樣式，再適當修改<a>標簽，如一下樣式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
我們刷新頁面預覽下效果

5
接下來我們隱藏掉二級下來菜單，並給它添加滑鼠滑動效果，使得當滑鼠滑動到主欄目時，二級下來菜單顯示，樣式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次預覽效果，如下圖所示：

6
至此，橫向二級下拉菜單就製作完成了，這里附加上全部代碼，以方便各位朋友參考，感謝各位朋友的瀏覽。
<!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;}
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; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="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>
<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>
<ul>
<li><a href="#">二級欄目</a></li>
<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></li>
</ul>
</div>
</body>
</html>

2、如何製作網頁首頁導航菜單顯示二級菜單

<!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>

這個拿去參考一下吧~~

3、網頁中的二級菜單三級菜單是什麼意思？

網頁也可以認作一個大型以及菜單界面，所有的東西都是可觀看和選擇的，菜單按鈕能下拉選擇一次菜單為二級菜單，菜單按鈕能下拉選擇二次菜單為三級菜單。

舉例說明，如下圖所示，「精彩論壇」為三級菜單，因為「精彩論壇"下屬有兩級菜單。

4、准備做一個滑鼠點擊顯示的二級菜單欄 CSS怎麼寫

你需要先將二級菜單初始設置為不顯示（display:none）,然後在一級菜單哪裡設置顯示（display:block）

5、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>
打開頁面預覽效果

6、dw網頁二級菜單代碼怎麼做！很著急把它放在一級導航底下！

方法和詳細的操作步驟如下：

1、第一步，打開dw軟體並創建一個新文件，見下圖，轉到下面的步驟。

2、第二步，執行完上面的操作之後，單擊「常用」選項，選擇「布局」按鈕，然後繪制一個圖層，見下圖，轉到下面的步驟。

3、第三步，執行完上面的操作之後，再次單擊該層並繪制另一個，看到第一層是layer1，第二層是layer2，見下圖，轉到下面的步驟。

4、第四步，執行完上面的操作之後，將游標放在layer1上，然後單擊「插入表格」，建立一個具有一行三列且寬度為288的表，見下圖，轉到下面的步驟。

5、第五步，執行完上面的操作之後，在表格中輸入百度經驗，百度知道，百度文庫，可以在屬性欄中設置以下屬性，見下圖，轉到下面的步驟。

6、第六步，執行完上面的操作之後，在第2層中輸入經驗首頁，個人中心，小測首頁，幫幫首頁，然後設置以下屬性，見下圖。這樣，就解決了這個問題了。

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

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

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

8、JS怎麼寫二級菜單呢？

$(".menu-lei").hover(function(){
$(this).addClass("onover");
$(".menu-sub").show(); //二級菜單容器
var item1 = $(this).attr("name");
$("."+item1).show(); //二級菜單內容顯示
},
function(){

$(this).removeClass("onover");
$(".menu-sub").hide();
var item1 = $(this).attr("name");
$("."+item1).hide();
})

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

Web程序設計二級下拉菜單頁面做法：
以純CSS為例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{
margin:0px;
padding:0px;
}
#menu
{

width:500px;
height:38px;
margin:5px auto;

}
#menu ul
{
height:38px;
list-style:none;
margin:0;
padding:0;
}
#menu li
{
float:left;

}
#menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:38px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu li a:hover{
color:#000000;
text-decoration:none;
}

#menu li ul{
background: #ECE9E9;
border:1px solid #D8D8D8;
display:none;
height:auto;
position:relative;
left:20px;
width:100px;
z-index:200;
}
#menu li ul li
{
margin-left:0px;
height:38px;

}

#menu li:hover ul{
display:block;
}
#menu li li {
display:block;
float:none;
width:100px;
}
#menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#menu li ul a:hover{
background:#555;
color:#fff;

}

</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">無下拉狀態</a></li>
<li><a href="#">有下拉狀態</a>
<ul>
<li><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

10、這樣類似的二級菜單用CSS和html怎麼實現?

這個說來話來，但只要你知道原理就很簡單了，做得好不好看是樣式的問題了。請看如下調用jquery的j顯示子菜單的代碼：
$("#menu_2").hover(function() {
$(".sub_menu_2").show();
},
function() {
/*這里就是out事件*/
$(".sub_menu_2").hide();
});
剩下的就是樣式的問題了

與網頁設計二級菜單怎麼寫相關的知識