導航:首頁 > 萬維百科 > 網頁二級菜單設計軟體

網頁二級菜單設計軟體

 發布時間：2020-11-16 15:43:01

1、如何在微信公眾號自定義菜單二級菜單中設置多個網頁圖文？

公眾號自定義菜單二級菜單中的多個網頁圖文可以通過修改公眾號後台里子菜單的名稱來設置。

2、HTML中什麼是二級菜單導航

舉個例子吧，任意一本教科書裡面，每一章算是一級導航菜單，那每一章裡面的每一節就是二級導航菜單，每一節裡面還可以有一段算是三級導航菜單，以此類推可以有N級導航菜單。每級菜單裡面可以有div和table,dl,dt,dd等等。

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

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

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

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

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

5、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>

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

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

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

7、網頁二級導航（橫向的二級菜單）

<! 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=gb2312" />
<title>無標題文檔</title>
<SCRIPT type=text/javascript>
var num=5;
function getObj(objName){return(document.getElementById(objName));}
function tag(id){
getObj("searconrow2").innerHTML=getObj("proce"+id).innerHTML;
for(var i=1;i<=num;i++){
if(i==id) {
getObj("changebox"+i).className="search1";
}
else{
if(i==3 || i==(id-1)){
getObj("changebox"+i).className="search3";}
else{
getObj("changebox"+i).className="search2";}
}
}
}
function loadme(){
getObj("searconrow2").innerHTML=getObj("proce1").innerHTML;
}
</SCRIPT>
<style type="text/css">
#twopage{width:779px; height:62px; margin:0px auto; background-image:url(bannerbg.gif); overflow:hidden}
#twopage ul{width:779px; height:62px; margin:0px; list-style-type:none; overflow:hidden}
#twopage ul li{ float:left; padding:12px 20px; height:62px; margin:0px;overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#660099}
#searchnavi{width:389px; height:19px; margin:0px; padding:0px; overflow:hidden}
#searchnavi ul{width:389px; margin:0px; padding:0px; list-style-type:none; overflow:hidden}
#searchnavi ul li{ float:left;width:70px; height:18px; cursor:hand; text-align:left}
A:link{
color:#000033;
text-decoration:none;
}
A:visited{
color:#000033;
text-decoration:none;
}
A:hover{color:#FF9900;
text-decoration:none;
}
#searchnavi LI.search1 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;BACKGROUND: url(topbg.gif) no-repeat; text-align:center; WIDTH: 70px; PADDING: 5px 0px 0px 0px; HEIGHT: 19px! important
}
#searchnavi LI.search2 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
#searchnavi LI.search3 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
.hiddenbox{
display:none;
}
</style>
</head>
<body>
<div id="twopage">
<ul>
<li><table width="389" height="38" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><DIV id="searchnavi">
<UL>
<LI class="search1" id="changebox1"onmouseover="javascript:tag(1);this.blur();"><a href="#">數碼產品</a> </LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(2);this.blur();"><a href="#">手機配件</a> </LI>
<LI class="search2" id="changebox3"onmouseover="javascript:tag(3);this.blur();"><a href="#">IPOD配件</a></LI>
<LI class="search2" id="changebox4"onmouseover="javascript:tag(4);this.blur();"><a href="#">家用電器</a> </LI>
<LI class="search2" id="changebox5"onmouseover="javascript:tag(5);this.blur();"><a href="#">辦公用品</a> </LI>
</UL></DIV>
</td>
</tr>
<tr>
<td align="left" background="images/dibg.gif" style="padding-left:8px "><DIV id=searchcontent>
<DIV id="searconrow2"></DIV>
<DIV class="hiddenbox" id="proce1" >MD/CD讀卡器 | SIM讀卡器 | MP3/MP4 | 數碼相機 | PSP相關產品
</DIV>
<DIV class="hiddenbox" id="proce2">手機外殼 | 屏幕保護帖 | 手機帖紙 | 手機掛鏈 | 手機閃光器具| 鈴聲壁紙
</DIV>
<DIV class="hiddenbox" id="proce3">IPOD 外殼| IPOD 保護帖 | IPOD 保護套 | IPOD 數據線 | IPOD 外設
</DIV>
<DIV class="hiddenbox" id="proce4">手機 | 電話 | 風扇 | 隨身聽 | 電腦 | 電視 | 自行車 | 滑冰鞋
</DIV>
<DIV class="hiddenbox" id="proce5">列印機 | HUB | 軟體 | 紙張 | ERP系統
</DIV>
</DIV></td>
</tr>
</table>
</li>
</ul>
</DIV>
</body>
</html>

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

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

這個拿去參考一下吧~~

9、〖求助〗二級菜單這個頁面怎麼調出來的

方法1：直接還原默認法

在界面左上方，有一個"AutoCAD經典",然後點擊"AutoCAD經典"後面的倒三角形。

調出了cad繪圖空間模式選項，有逗cad經典地、逗二維草圖與注釋地、逗三維建模地等選項，點擊逗Autocad經典地選項。

這時候就會自動還原掉cad經典模式，所有的默認菜單都會調出來，這個操作類似於手機的逗恢復出廠設置地。由於調出來的工具中，可能還有個逗建模地的快捷方式是你不需要的，點擊它的右上角逗x地將其關掉即可。
方法二：自定義調出快捷工具法
這種方式的優點在於，你可以隨心所欲地調出、關閉你想要或者是不想要的快捷方式，好比是逗私人定製地菜單，特別是針對部分不常用快捷工具不見了的場景特別管用。在作圖區域的上方，有菜單欄

在菜單欄的這個區域，單擊滑鼠右鍵，調出自定義菜單欄。找到並點擊逗繪圖地，這時候就調出了，繪圖工具。
運用同樣的方法，在菜單欄的這區域點擊滑鼠右鍵，然後再點擊出來的快捷菜單的下方的倒三角形，找到逗修改地，並點擊逗修改地，就可以調出修改快捷命令

這時候可以看到，喜歡的繪圖、修改快捷菜單都調出來了。進入了熟悉的繪圖界面，這種方式的優點還有，你可以將上方不需要的快捷菜單關閉，使得繪圖的空間變大，便於操作。

與網頁二級菜單設計軟體相關的知識