铁雪资源网 Design By www.gsvan.com
本文实例讲述了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,仿爱微网,两级导航菜单
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无js实现仿爱微网两级导航菜单效果代码的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?