多层超酷导航条

稿源：互联网 2022-04-05 00:37:17 点击： 1357 撤稿纠错

多层导航菜单，看起来有点立体感，修改样式后效果会更好。

以下讨论的是和导航菜单特效相关的多层超酷导航条教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
A:link,A:visited{COLOR: #000000;TEXT-DECORATION: none}
A:hover{COLOR:#6B9636;TEXT-DECORATION: underline}
td{font-size:9pt}
.a_mo{position:absolute;width:80px;left:30px;background-color: #F7F7E7;z-index:1;border: 1px none #6B9636;visibility: hidden}
</style>
<script language="javascript">
a_mo4=10 //注意这里的10是指子菜单里的内容多少，10个却为有9个子菜单
function displaymainmenu(){mainmenu.style.visibility="visible";}
function hidemainmenu(){mainmenu.style.visibility="hidden";
for(i=1;i<a_mo4;i++)
eval('sonmenu'+i+'.style.visibility="hidden"')}
function displaysonmenu(n){
for(i=1;i<a_mo4;i++)
eval('sonmenu'+i+'.style.visibility="hidden"');
x=eval(n);x.style.visibility="visible";}
function hidesonmenu(n){mainmenu.style.visibility="hidden";
for(i=1;i<a_mo4;i++)eval('sonmenu'+i+'.style.visibility="hidden"')}
</script>
<div id="menu" style="display:" onmouseover="javascript:displaymainmenu()" align="center">
<div id="mainmenu" onmouseout="hidemainmenu()" style="position:absolute;width:90px;background-color: #F7F7E7;z-index:1;border: 1px none #6B9636;visibility: hidden">
<table width="100%" height=100% gcolor="#F7F7E7" cellspacing="0" cellpadding="0" border=2 bordercolor="#6B9636"><tr><td><center><a href="main.php">建站资源</a></center>
<table width="90%" border="1" cellspacing="0" cellpadding="2" align="center" bgcolor="#F7F7E7" bordercolor="#6B9636"><tr><td>

<div id="menuLayer1" style="display:" onmouseover="javascript:displaysonmenu('sonmenu1')">
<a href="layer.php?layer=投资与理财>">投资与理财</a>
<div id="sonmenu1" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bordercolor="#6B9636">
<tr><td><a href="#投资与理财>家庭理财">家庭理财</a></td></tr>
<tr><td><a href="#投资与理财>股票证券">股票证券</a></td></tr>
<tr><td><a href="#投资与理财>保险">保险</a></td></tr>
<tr><td><a href="#投资与理财>求职与招聘">求职与招聘</a></td></tr>
<tr><td><a href="#投资与理财>政策法律">政策法律</a></td></tr>
<tr><td><a href="#投资与理财>二手交易">二手交易</a></td></tr>
<tr><td><a href="#投资与理财>其它">其它</a></td></tr>
</table></div></div></td></tr><tr><td>

<div id="menuLayer2" style="display:" onmouseover="javascript:displaysonmenu('sonmenu2')"><a href="layer.php?layer=娱乐休闲>">娱乐休闲</a>
<div id="sonmenu2" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bgcolor="" bordercolor="#6B9636">
<tr><td><a href="#娱乐休闲>酷站">酷站</a></td></tr>
<tr><td><a href="#娱乐休闲>游戏">游戏</a></td></tr>
<tr><td><a href="#娱乐休闲>旅游">旅游</a></td></tr>
<tr><td><a href="#娱乐休闲>体育运动">体育运动</a></td></tr>
<tr><td><a href="#娱乐休闲>影视">影视</a></td></tr>
<tr><td><a href="#娱乐休闲>歌曲与音乐">歌曲与音乐</a></td></tr>
<tr><td><a href="#娱乐休闲>美食">美食</a></td></tr>
<tr><td><a href="#娱乐休闲>动漫">动漫</a></td></tr>
<tr><td><a href="#娱乐休闲>其它">其它</a></td></tr>
</table></div></div></td></tr><tr><td>

<div id="menuLayer3" style="display:" onmouseover="javascript:displaysonmenu('sonmenu3')"><a href="layer.php?layer=计算机>">计算机</a>
<div id="sonmenu3" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bgcolor="" bordercolor="#6B9636">
<tr><td><a href="#计算机>WINDOWS">WINDOWS</a></td></tr>
<tr><td><a href="#计算机>编程">编程</a></td></tr>
<tr><td><a href="#计算机>互联网">互联网</a></td></tr>
<tr><td><a href="#计算机>上网技巧">上网技巧</a></td></tr>
<tr><td><a href="#计算机>硬件">硬件</a></td></tr>
<tr><td><a href="#计算机>操作系统">操作系统</a></td></tr>
<tr><td><a href="#计算机>应用软件">应用软件</a></td></tr>
<tr><td><a href="#计算机>图像处理">图像处理</a></td></tr>
<tr><td><a href="#计算机>其它">其它</a></td></tr>
</table></div></div></td></tr><tr><td>

<div id="menuLayer7" style="display:" onmouseover="javascript:displaysonmenu('sonmenu7')"><a href="layer.php?layer=家庭>">家庭</a>
<div id="sonmenu7" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bgcolor="" bordercolor="#6B9636">
<tr><td><a href="#家庭>布置与装修">布置与装修</a></td></tr>
<tr><td><a href="#家庭>育儿">育儿</a></td></tr>
<tr><td><a href="#家庭>宠物">宠物</a></td></tr>
<tr><td><a href="#家庭>家电">家电</a></td></tr>
<tr><td><a href="#家庭>家务事">家务事</a></td></tr>
<tr><td><a href="#家庭>其它">其它</a></td></tr>
</table></div></div></td></tr><tr><td>

<div id="menuLayer8" style="display:" onmouseover="javascript:displaysonmenu('sonmenu8')"><a href="layer.php?layer=教育>">教育</a>
<div id="sonmenu8" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bgcolor="" bordercolor="#6B9636">
<tr><td><a href="#教育>文学">文学</a></td></tr>
<tr><td><a href="#教育>军事">军事</a></td></tr>
<tr><td><a href="#教育>留学移民">留学移民</a></td></tr>
<tr><td><a href="#教育>培训考试">培训考试</a></td></tr>
<tr><td><a href="#教育>学习园地">学习园地</a></td></tr>
<tr><td><a href="#教育>好书欣赏">好书欣赏</a></td></tr>
<tr><td><a href="#教育>艺术">艺术</a></td></tr>
<tr><td><a href="#教育>科学">科学</a></td></tr>
<tr><td><a href="#教育>其它">其它</a></td></tr>
</table></div></div></td></tr><tr><td>
<div id="menuLayer9" style="display:" onmouseover="javascript:displaysonmenu('sonmenu9')"><a href="layer.php?layer=其它>">其它</a>
<div id="sonmenu9" class=a_mo onmouseout="hidesonmenu()">
<table width="90%" border="1" cellspacing="2" cellpadding="2" align="center" bgcolor="" bordercolor="#6B9636">
<tr><td><a href="#其它>寻找">寻找</a></td></tr>
<tr><td><a href="#其它>征友">征友</a></td></tr>
<tr><td><a href="#其它>趣多多">趣多多</a></td></tr>
<tr><td><a href="#其它>星座与命理">星座与命理</a></td></tr>
<tr><td><a href="#其它>灵通告白">灵通告白</a></td></tr>
<tr><td><a href="#其它>其它">其它</a></td></tr>
</table></div></div></td></tr></table></td></tr></table>
<br></div>
<a href="http://www.k688.com">建站资源</a></div>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于多层超酷导航条的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080719145.shtml方便下次再访问哦。

·上一篇： 自由灵活的下拉菜单
·下一篇： 拖动的超酷菜单

多层超酷导航条

文章分类LIST >>返回首页

最新游戏

最新新闻