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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue.js实现的表格增加删除demo示例
May 22 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python解惑之整数比较详解
2017/04/24 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python调用其他文件函数或类的示例
2019/07/16 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python中time、datetime模块的使用
2020/12/14 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
生产部厂长职位说明书
2014/03/03 职场文书
文明班级建设方案
2014/05/15 职场文书
物流专业自荐信
2014/05/23 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
GO中sync包自由控制并发示例详解
2022/08/05 Golang