导航:首页 > 万维百科 > 网页二级菜单设计软件

网页二级菜单设计软件

 发布时间：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地将其关掉即可。
方法二：自定义调出快捷工具法
这种方式的优点在于，你可以随心所欲地调出、关闭你想要或者是不想要的快捷方式，好比是逗私人定制地菜单，特别是针对部分不常用快捷工具不见了的场景特别管用。在作图区域的上方，有菜单栏

在菜单栏的这个区域，单击鼠标右键，调出自定义菜单栏。找到并点击逗绘图地，这时候就调出了，绘图工具。
运用同样的方法，在菜单栏的这区域点击鼠标右键，然后再点击出来的快捷菜单的下方的倒三角形，找到逗修改地，并点击逗修改地，就可以调出修改快捷命令

这时候可以看到，喜欢的绘图、修改快捷菜单都调出来了。进入了熟悉的绘图界面，这种方式的优点还有，你可以将上方不需要的快捷菜单关闭，使得绘图的空间变大，便于操作。

与网页二级菜单设计软件相关的知识