脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js仿爱微网两级导航菜单效果

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

 更新时间：2015年08月31日 11:39:02   作者：企鹅  
这篇文章主要介绍了js实现仿爱微网两级导航菜单效果代码,通过javascript自定义函数结合鼠标点击事件实现tab切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/

具体代码如下：

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

您可能感兴趣的文章:

相关文章

  • 微信小程序实现手指触摸画板

    微信小程序实现手指触摸画板

    这篇文章主要为大家详细介绍了微信小程序实现手指触摸画板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JS操作图片(增,删,改) 例子

    JS操作图片(增,删,改) 例子

    JS操作图片(增,删,改) 例子，需要的朋友可以参考一下
    2013-04-04
  • 基于openlayers实现角度测量功能

    基于openlayers实现角度测量功能

    这篇文章主要为大家详细介绍了基于openlayers实现角度测量功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 19个很有用的 JavaScript库推荐

    19个很有用的 JavaScript库推荐

    流行的 JavaScript 库有jQuery，MooTools，Prototype，Dojo和YUI等，这些 JavaScript 库功能丰富，加上它们众多的插件，几乎能实现任何你需要的功能
    2011-06-06
  • es6基础学习之解构赋值

    es6基础学习之解构赋值

    解构赋值语法是一个 Javascript 表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。这篇文章主要给大家介绍了关于es6基础学习之解构赋值的相关资料，需要的朋友可以参考下
    2018-12-12
  • 如何实现axios的自定义适配器adapter

    如何实现axios的自定义适配器adapter

    Axios是一个非常优秀的基于promise的HTTP库，可以用在浏览器和node.js中。并且提供了很多便捷的功能，但如果我们想基于axios 扩展一些自己的数据请求方式（例如某些APP内专属的数据请求方式等），并能够使用上axios提供的便捷功能，该怎么自定义一个适配器adapter
    2021-05-05
  • Add a Table to a Word Document

    Add a Table to a Word Document

    Add a Table to a Word Document...
    2007-06-06
  • 原生JS实现导航下拉菜单效果

    原生JS实现导航下拉菜单效果

    这篇文章主要介绍了JS实现导航下拉菜单效果，用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript数组中的concat方法和splice方法

    javascript数组中的concat方法和splice方法

    这篇文章主要介绍了javascript数组中的concat方法和splice方法，concat方法作用合并数组，可以合并一个或多个数组，会返回合并数组之后的数据，不会改变原来的数组，更多相关内容需要的小伙伴可以参考下面文章内容
    2022-03-03
  • javascript(jquery)利用函数修改全局变量的代码

    javascript(jquery)利用函数修改全局变量的代码

    现在博客系统的评论遇到一个问题，用户点击“最后一页”链接之后就自动调取最后一页的资料来显示。
    2009-11-11

最新评论