js实现仿爱微网两级导航菜单效果代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js实现仿爱微网两级导航菜单效果代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3113字，纯文字阅读大概需要5分钟。
内容图文
本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款仿爱微网两级导航菜单，tab选项卡形式的导航菜单，原生js做的tab选项卡型的导航菜单，需要鼠标点击才切换出二级子菜单，可修改成鼠标移过去就更换内容的形式。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/
具体代码如下：
<html>
<head>
<title>一个两级的网页菜单</title>
<style>
*{margin:0;padding:0;}
.subnav {
background-color: #3188DA;
color: #C0DEF9;
height: 20px;
}
.subnav a {
color: #FFFFFF;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;
margin-top: 0;
}
.subnav a.cur {
color: #FAEC04;
}
.aa {
background-image: url("images/ui1.png");
background-origin: padding-box;
background-position: left -92px;
background-repeat: no-repeat;
}
.bb {
background-color: #75BAFB;
background-image: url("images/ui1.png");
background-position: left -183px;
background-repeat: no-repeat;
}
.cc{color:#ffffff;}
.dd{color:#000}
ul,li{list-style-type:none}
#navbox {
margin-bottom: 15px;
position: relative;
width:960px;
}
.mainnav {
border-bottom-color: #3188DA;
border-bottom-style: solid;
border-bottom-width: 5px;
height: 31px;
}
.mainnav li {
color: #FFFFFF;
float: left;
font-size: 14px;
font-weight: bold;
line-height: 31px;
margin-right: 5px;
text-align: center;
width: 90px;
}
.mainnav li a {
display: block;
font-weight: normal;
height: 31px;
}
.uhide{display:none;}
.ushow{display:block;}
</style>
</head>
<body>
<div id="navbox">
<ul class="mainnav">
<li class='bb' onclick='qh(0);' id='ta_0'><a href="#" class='cc' id='a0'>首页</a></li>
<li class='aa' onclick='qh(1);' id='ta_1'><a href="#" class='dd' id='a1'>PHP教程</a></li>
<li class='aa' onclick='qh(2);' id='ta_2'><a href="#" class='dd' id='a2'>网页前端</a></li>
<li class='aa' onclick='qh(3);' id='ta_3'><a href="#" class='dd' id='a3'>网页特效</a></li>
<li class='aa' onclick='qh(4);' id='ta_4'><a href="#" class='dd' id='a4'>脚本下载</a></li>
</ul>
<div style="padding-left:20px;" class="uhide" id='tab_0'>
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_1'>
<a >PHP基础</a> |
<a href="#">mysql教程</a> |
<a href="#">smarty教程</a> |
<a href="#">PHP框架</a> |
<a href="#">PHP开源</a> |
<a href="#">Linux教程</a>
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_2'>
<a >DIV+CSS布局</a> |
<a href="#">javascript教程</a> |
<a href="#">jquery教程</a> |
<a href="#">ajax教程</a> |
<a href="#">flash开源</a> |
<a href="#">photoshop教程</a>
</div>
<div style="padding-left:20px;" class="subnav uhide" id='tab_3'>
<a >js导航菜单</a> |
<a href="#">js表单特效</a> |
<a >js幻灯片</a> |
<a href="#">js文本特效</a> |
<a href="#">js弹出层</a> |
<a href="#">js网页特效</a>
</div>
<div style="padding-left:20px;" class="uhide" id='tab_4'>
</div>
</div>
<script>
function g(o){return document.getElementById(o);}
function qh(n){
for(var i=0;i<=6;i++){
g('ta_'+i).className='aa';
g('ta_'+n).className='bb';
g('a'+i).className='dd';
g('a'+n).className='cc';
g('tab_'+i).className='uhide subnav';
g('tab_'+n).className='ushow subnav';
g('tab_0').className='uhide';
g('tab_0').className='uhide';
g('tab_4').className='uhide';
g('tab_4').className='uhide';
}
}
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的js实现仿爱微网两级导航菜单效果代码全部内容，希望文章能够帮你解决js实现仿爱微网两级导航菜单效果代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。