动态按钮导航栏怎么制作~！最好帮我做一个
- 提问者网友：欺烟
- 2021-05-14 19:26
- 五星知识达人网友：廢物販賣機
- 2021-05-14 19:47
可以使用Dreamweaver网站制作过程中的动作面板来完成。
或者可以直接用flash制作一个。
再者，直接到网上去下载一些别人提供的可用代码，也是不错的，这个方法较为实用。
很多的网站上都有呀，一般渡是用div加javascript做的动态改变位置及显示的，如下代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>多级菜单</title>
<META http-equiv="content-type" CONTENT="text/html;charset=gb2312">
<META NAME="Author" CONTENT="CZH;czh44@sohu.com">
</head>
<style >
body {font-size:9pt;font-family:'宋体'}
table {font-size:9pt;font-family:'宋体'}
td.con {border-left:1px solid gray;width:120px;height:21px}
a.m{text-decoration:none;visited:none}
.menu{background: #eeeeee;position:absolute;visibility:hidden;z-index:3;line-height:18px;width:90px}
.mainmenu{position:absolute;top:35px}
</style>
<script language="javascript">
var theShowLayIndex=0;
var mouseLayer; //当前鼠标所在层
var rowHeight = 18; //层中第一行行高
var delay = 1200; //延时关闭时间,单位毫秒
var ifHide; //决定鼠标移动时层的隐藏
function showSubMenu(parentLayer,subLayer,rows,xPos,ifmain)
{
mouseLayer = parentLayer;
//先关闭该级下所子菜单
ifHide = false;
var menuLayers = document.getElementsByTagName("DIV");
if(ifmain)
{
hideAll();
}
else
{
for (i=0; i<menuLayers.length; i++)
{
if((menuLayers[i].id.indexOf(parentLayer) != -1) && (menuLayers[i].id != parentLayer))
{
document.getElementById(menuLayers[i].id).style.visibility = "hidden";
}
}
}
//展开子菜单
if(subLayer)
{ //确定子菜单位置，其中减5使菜单向上向左和父菜单有部分重合
document.getElementById(subLayer).style.top = parseInt(document.getElementById(parentLayer).style.top) + rows * rowHeight-1;
document.getElementById(subLayer).style.left = parseInt(document.getElementById(parentLayer).style.left) + xPos * document.getElementById(parentLayer).clientWidth - 5;
document.getElementById(subLayer).style.visibility = "visible";
}
}
function hideMenu(oldMouseLayer)
{
//如果不在子菜单中，则关闭所有菜单
if(oldMouseLayer)
{
ifHide = true;
//延时1秒后再执行hideMenu进行检查，决定是否关闭
window.setTimeout("hideMenu()",delay);
}
else //延时以后
{
if(ifHide == true)
hideAll();
}
}
function hideAll()
{ //关闭主菜单以外的所有菜单
var menuLayers = document.getElementsByTagName("DIV");
for (i=0; i<menuLayers.length; i++)
{
if(menuLayers[i].id != "menuOne" && menuLayers[i].id != "menuTwo" && menuLayers[i].id != "menuThree" && menuLayers[i].id != "menuFour")
{
document.getElementById(menuLayers[i].id).style.visibility = "hidden";
}
}
}
</script>
<body>
<br>
<table width=100% id="theMenu" cellspacing="0" cellpadding="0" bgcolor="#BEC8F0" >
<tr>
<td width="100px"> </td>
<td class="con" id="td1">
<div id="menuOne" onMouseOver="showSubMenu('menuOne','menuOneSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单一</a>
</div>
</td>
<td class="con" id="td2">
<div id="menuTwo" onMouseOver="showSubMenu('menuTwo','menuTwoSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单二</a>
</div>
</td>
<td class="con" id="td3">
<div id="menuThree" onMouseOver="showSubMenu('menuThree','menuThreeSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单三</a>
</div>
</td>
<td class="con" id="td4">
<div id="menuFour" onMouseOver="showSubMenu('menuFour','menuFourSub01',1,0,1)" onMouseOut="hideMenu(this.id)">
<a href="" class=m>主菜单四</a>
</td>
<td id="td5"> </td>
</tr>
</table>
<div id="menuOneSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xy01.html" onMouseOver="showSubMenu('menuOneSub01','menuOneSub0101',0,1)" >1菜单项一 >></a><br>
<a href="xy02.html" onMouseOver="showSubMenu('menuOneSub01')">1菜单项二</a><br>
</div>
<div id="menuOneSub0101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="" onMouseOver="showSubMenu('menuOneSub0101')">1子菜单项01</a><br>
<a href="" onMouseOver="showSubMenu('menuOneSub0101')">1子菜单项01</a><br>
</div>
<div id="menuTwoSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xk01.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项一</a><br>
<a href="xk02.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项二</a><br>
<a href="xk03.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项三</a><br>
<a href="xk04.html" onMouseOver="showSubMenu('menuTwoSub01')">2菜单项四</a><br>
</div>
<div id="menuThreeSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项一</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项二</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub01')">3菜单项三</a><br>
<a href="js04.html" onMouseOver="showSubMenu('menuThreeSub01','menuThreeSub0101',3,1)">3菜单项四 >></a><br>
</div>
<div id="menuThreeSub0101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub0101')">3子菜单项01</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub0101')">3子菜单项01</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub0101','menuThreeSub010101',2,1)">3子菜单项01 >></a><br>
</div>
<div id="menuThreeSub010101" class="menu" onMouseOut="hideMenu(this.id)">
<a href="js01.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
<a href="js02.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
<a href="js03.html" onMouseOver="showSubMenu('menuThreeSub010101')">3子菜单项0101</a><br>
</div>
<div id="menuFourSub01" class="menu" onMouseOut="hideMenu(this.id)">
<a href="xs01.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项一</a><br>
<a href="xs02.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项二</a><br>
<a href="xs03.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项三</a><br>
<a href="xs04.html" onMouseOver="showSubMenu('menuFourSub01')">4菜单项四</a><br>
</div>
</body>
</html>