js实现仿爱微网两级导航菜单效果代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了js实现仿爱微网两级导航菜单效果代码。分享给大家供大家参考。具体如下:

这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式。

运行效果截图如下:

js实现仿爱微网两级导航菜单效果代码

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php pdo操作数据库示例
2017/03/10 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
物业经理求职自我评价
2013/09/22 职场文书
大一自我鉴定范文
2013/12/27 职场文书
2014年教师节寄语
2014/04/03 职场文书
房地产开发项目建议书
2014/05/16 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
二审代理词范文
2015/05/25 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
员工给公司的建议书
2019/06/24 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Python打包exe时各种异常处理方案总结
2021/05/18 Python