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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
php字符串分割函数explode的实例代码
2013/02/07 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
python opencv肤色检测的实现示例
2020/12/21 Python
C#的几个面试问题
2016/05/22 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
教师现实表现材料
2014/02/14 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
干部考核评语
2014/04/29 职场文书
家具商场的活动方案
2014/08/16 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
在人间读书笔记
2015/06/30 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技