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.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
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示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python获得一个月有多少天的方法
2015/06/04 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python数据结构之单链表详解
2017/09/12 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
满月酒答谢词
2014/01/14 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
总账会计岗位职责
2014/03/13 职场文书
新教师培训心得体会
2014/09/02 职场文书
代理词怎么写
2015/05/25 职场文书
同意转租证明
2015/06/24 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript