js实现仿爱微网两级导航菜单效果代码
本文实例讲述了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程序设计有所帮助。
相关推荐
-
JS实现带有抽屉效果的产品类网站多级导航菜单代码
本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具
-
JS+CSS实现大气的黑色首页导航菜单效果代码
本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
-
js实现的动画导航菜单效果代码
本文实例讲述了js实现的动画导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简单的动画导航菜单效果,每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动,指明当前菜单的位置. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-animate-nav-menu-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu
-
JS实现自动变化的导航菜单效果代码
本文实例讲述了JS实现自动变化的导航菜单效果代码.分享给大家供大家参考.具体如下: 自动变化的JS导航菜单,按照时间自动切换,有需要的参考一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
-
JS实现黑色大气的二级导航菜单效果
本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
JS+CSS实现简单的二级下拉导航菜单效果
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/
-
JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC
-
JS实现的简洁二级导航菜单雏形效果
本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
-
基于dropdown.js实现的两款美观大气的二级导航菜单
本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
-
js实现仿爱微网两级导航菜单效果代码
本文实例讲述了js实现仿爱微网两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款仿爱微网两级导航菜单,tab选项卡形式的导航菜单,原生js做的tab选项卡型的导航菜单,需要鼠标点击才切换出二级子菜单,可修改成鼠标移过去就更换内容的形式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/ 具体代码如下: <html> <head> <title&g
-
js实现带圆角的两级导航菜单效果代码
本文实例讲述了js实现带圆角的两级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用JS做的圆角菜单,支持两级菜单显示,本人比较喜欢的风格,修改使用方便,新手也能上手快.使用有几张圆角图片来修饰了菜单,喜欢的朋友可以下载代码留作收藏使用.真心不错的蓝色导航条代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
-
jQuery实现仿美橙互联两级导航菜单效果完整实例
本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像是一个滑动门,不会让你失望的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-mchl-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/
-
jQuery实现仿美橙互联两级导航菜单的方法
本文实例讲述了jQuery实现仿美橙互联两级导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
-
jquery 实现两级导航菜单附效果图
主要用于运维系统, 对界面要求不高的场合. 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1. HTML 页面及 JS 交互, 注意引入 Jquery 文件 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
-
js实现改进的仿蓝色论坛导航菜单效果代码
本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款改进的仿蓝色论坛导航菜单,滑动门级的导航菜单,网址跟踪链接的JS导航菜单,可以支持二级的菜单.为改善用户体验,加了延时.其原理是将链接地址和网址比较,如果一致,则加强该链接和上级链接的显示. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/ 具体代码如下: <html> &l
-
JS实现仿腾讯微博无刷新删除微博效果代码
本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码.分享给大家供大家参考.具体如下: 这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-sina-web-ajax-del-info-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
-
JS+CSS实现自动切换的网页滑动门菜单效果代码
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code