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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
详解webpack 多入口配置
Jun 16 Javascript
微信小程序实现图片上传功能
May 28 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP截取中文字符串的问题
2006/07/12 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python实现祝福弹窗效果
2019/04/07 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
《掌声》教学反思
2014/02/23 职场文书
环保倡议书50字
2014/05/15 职场文书
运动与健康自我评价
2015/03/09 职场文书
小爸爸观后感
2015/06/15 职场文书
优质服务标语口号
2015/12/26 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android