编程 Javascript

js实现改进的仿蓝色论坛导航菜单效果代码

Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款改进的仿蓝色论坛导航菜单，滑动门级的导航菜单，网址跟踪链接的JS导航菜单，可以支持二级的菜单。为改善用户体验，加了延时。其原理是将链接地址和网址比较，如果一致，则加强该链接和上级链接的显示。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

<html>
<head>
<title>改进的仿蓝色论坛导航菜单</title>
<style>
body{WIDTH:760px;margin:0 auto;padding:0;text-align:center}
#mch{
WIDTH:760px;
margin:0;
text-align:center;
}
#mch ul { 
 padding: 0;
 margin: 0;
 list-style: none;
}
#mch li {
 list-style: none;
 float: left;
 margin:0 auto;
 padding: 0;
line-height:16px;
}
#mch li div{}
#mch li ul { 
 position:relative;
 display: none;
}
#mch li:hover #mch ul, #mch li.over ul {
 display: block;
}
#mch li.over{background:#147202;height:26px;}
#mch ul li a{
 display:block;
 font-size:12px;
 padding:5px 23px 3px 23px;
 text-decoration: none;
 color: #ffffff;
}
#mch ul li a:hover{
 background-color:#199501;
}
 #mch .lib ul li a{
 float:left;
 display:block;
 width:auto;
 margin:4px 0 0 0;
 padding:2px 4px 0 4px;
 text-align:center;
 text-decoration:none;
 color:#ffffff;
 }
 #mch .lib a:hover{
 text-decoration:none;
 color: #ff2200;
 }
#mch .lib{margin:0 3px 0 0;}
#mch ul .lib ul li{
position:absolute;
float:left;
padding:0;
margin:2px 2px 2px 0px;
height:25px;
top:0;left:0;
width:760px;
background:#147202;
}
#mch .lib li a{
 display:block;
 font-size:12px;
 padding:4px 3px;
 margin-right:1px;
 text-decoration: none;
 color: #199501;
}
#mch .lib li a:hover{background:#199501;}
</style>
</head>
<body>
<div id="mch"></div>
<script>
var m_path="/";
var dPu="wisdom";
</script>
<script>
if(typeof(m_path)=='undefined')var m_path="";
function QueryString( paramName )
{
 var oRegex = new RegExp('[\?&]' + paramName + '=([^&]+)','i') ;
 var oMatch = oRegex.exec(window.location.search) ;
 if (oMatch && oMatch.length>1) return oMatch[1];
 else return null;
}
navdata='<ul id="nav">'+
'<li class="lib"><a href="'+m_path+'default.html" target="_self">首</a><ul><li><A href="#">新浪</A></span> <A href="#">网易</A> <A href="#">QQ</A> <A href="#">雅虎中国</A> <A href="http://www.baidu.com/">百度</A> <A href="#">Google搜索</A> <a href="#">About</a> <a href="#">USAToday</a> <a href="#">NewsNow</a> <a href="/">BBC</a> <a href="#">CNN</a> <a href="#">Alexa</a> <a href="#">网址导航</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'channel1.html" target="_self">春　秋</a><ul><li><A href="'+m_path+'column1.html">故事传说</A> <A href="'+m_path+'column2.html">生肖星座</A> <A href="'+m_path+'column3.html">姓氏宗亲</A> <A href="'+m_path+'column4.html">周易八卦</A> <A href="'+m_path+'wisdom.html">名言谚语</A> <A href="'+m_path+'column6.html">民俗节会</A> <A href="'+m_path+'column7.html">密方绝活</A> <A href="'+m_path+'column8.html">百家争鸣</A> <A href="'+m_path+'column9.html">异域采风</A> <A href="'+m_path+'column10.html">现代文化</A> <A href="'+m_path+'column11.html">人文景点</A> <A href="'+m_path+'column12.html">龙的传人</A></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'channel4.html" target="_self">乐　府</a><ul><li><A href="'+m_path+'column20.html">娱乐动态</A> <A href="'+m_path+'column21.html">华语</A> <A href="'+m_path+'column22.html">日韩</A> <A href="'+m_path+'column23.html">欧美</A> <A href="'+m_path+'column24.html">摇滚</A> <A href="'+m_path+'column25.html">图片</A> <A href="'+m_path+'column26.html">人物</A> <A href="'+m_path+'column27.html">古典</A> <A href="'+m_path+'column28.html">影视</A> <A href="'+m_path+'column29.html">综艺</A> <A href="'+m_path+'column30.html">非主流</A> <A href="'+m_path+'column31.html">乐评</A><a href="'+m_path+'column32.html" style="padding:0;"></a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'academy.html" target="_self">学　院</a><ul><li><a href="'+m_path+'academy.html">理学 哲学 玄学 文学</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'action.html" target="_self">行　之</a><ul><li><a href="'+m_path+'action.html">学习经验 科技探索 文化研究 社会实践 哲理感悟</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'channel3.html" target="_self">时　记</a><ul><li><a href="'+m_path+'channel3.html">真人真事 自己的事 没有的事 过去的事 怕忘的事 八面来风 就事论是</a><a href="'+m_path+'column70.html" style="padding:0;"></a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'leader.html" target="_self">易　流</a><ul><li><a href="'+m_path+'leader-offer.html">招业</a> <a href="'+m_path+'leader-cool.html">酷</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'showfile.html?articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo" target="_self">文</a><ul><li><a href="'+m_path+'showfile.html?articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo">发布到>></a><A href="#" target=_blank>网页天堂</A> <A href="#" target=_blank>阿酷作家</A> <A href="#" target=_blank>好邻里</A> <A href="/" target=_blank>万目网</A> <A href="#" target=_blank>第五电影</A> <A href="#" target=_blank>心地家园</A> <A href="#" target=_blank>日月峡</A> <A href="#" target=_blank>佛教博客</A> <A href="#" target=_blank>求知求是</A> <A href="#" target=_blank>八强网</A> <A href="#" target=_blank>>>更多网站</A></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'default.html" target="_self">首</a><ul><li><A href="#">新浪</A></span> <A href="#">网易</A> <A href="#">QQ</A> <A href="#">雅虎中国</A> <A href="#">百度</A> <A href="#">Google搜索</A> <a href="#">About</a> <a href="#">USAToday</a> <a href="#">NewsNow</a> <a href="#">BBC</a> <a href="#">CNN</a> <a href="#">Alexa</a> <a href="#">网址导航</a></li></ul></li>'+
'</ul>';
document.getElementById('mch').innerHTML=navdata;
var dfr,dfrover,thsobj,thsobjover;
if(typeof(dPu)=="undefined")var dPu=document.location.pathname.replace(/(.*\/){0,}([^\.]+).*/ig,"$2");
if(dPu==""||dPu=="/")dPu="default";
//var thslft=;
function startList(dg) {
 if (document.getElementById) {
  var navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
   var nA=node.getElementsByTagName('a');
   nA[0].style.background="#199501";
   node.className=node.className.replace(" over", "");
   if((dg==0||dg==3)&&node.parentNode==navRoot){
   node.getElementsByTagName('li')[0].style.left=-node.offsetLeft+document.getElementById('mch').getElementsByTagName('li')[0].offsetLeft+"px";
    node.onmouseover=function() {
     thsobjover=this;
     clearTimeout(dfr);
     dfrover=setTimeout("startList(1);thsobjover.className+=' over';thsobjover.getElementsByTagName('a')[0].style.background='#147202';",200);
    }
    node.onmouseout=function() {
     thsobj=this;
     clearTimeout(dfrover);
     dfr=setTimeout("thsobj.getElementsByTagName('a')[0].style.background='#199501';thsobj.className=thsobj.className.replace(' over','');startList(2);",2000);
    }
   } 
   if(dg==1||dg==3) continue;
    for(j=0;j<nA.length;j++){
    if(nA[j].pathname.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")==dPu){
     node.className+=" over";
     nA[0].style.background="#147202";
     nA[0].style.fontWeight="800";
     if(j>0)nA[j].style.background="#199501";
     nA[j].onclick=function(){this.blur();return false}
     dg=3;
     }
    }
   }
  } 
 }
}
startList(0);
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

js实现改进的仿蓝色论坛导航菜单效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript DOM 学习第五章表单简介

Feb 19 Javascript

P3P Header解决Cookie跨域的问题

Mar 12 Javascript

jquery mobile实现拨打电话功能的几种方法

Aug 05 Javascript

JS中的log对象获取以及debug的写法介绍

Mar 03 Javascript

js中iframe调用父页面的方法

Oct 30 Javascript

js实现多选项切换导航菜单的方法

Feb 06 Javascript

Angular中的Promise对象($q介绍)

Mar 03 Javascript

JavaScript中Array的实用操作技巧分享

Sep 11 Javascript

原生js实现打字动画游戏

Feb 04 Javascript

js弹出窗口简单实现代码

Mar 22 Javascript

基于node.js实现微信支付退款功能

Dec 19 Javascript

react antd表格中渲染一张或多张图片的实例

Oct 28 Javascript

配置Grunt的Task时通配符支持和动态生成文件名问题

Sep 06 #Javascript

基于jquery实现的树形菜单效果代码

Sep 06 #Javascript

jQuery.extend 函数及用法详细

Sep 06 #Javascript

jquery动态导航插件dynamicNav用法实例分析

Sep 06 #Javascript

jquery实现可自动收缩的TAB网页选项卡代码

Sep 06 #Javascript

jquery实现初次打开有动画效果的网页TAB切换代码

Sep 06 #Javascript

js实现简洁的TAB滑动门效果代码

Sep 06 #Javascript

You might like

PHP提取数据库内容中的图片地址并循环输出

2010/03/21 PHP

PHP的反射类ReflectionClass、ReflectionMethod使用实例

2014/08/05 PHP

深入浅析PHP7.0新特征（五大新特征）

2015/10/29 PHP

Yii调试查看执行SQL语句的方法

2016/07/15 PHP

实例分析PHP中PHPMailer发邮件

2017/12/13 PHP

9行javascript代码获取QQ群成员具体实现

2013/10/16 Javascript

jQuery旋转木马式幻灯片轮播特效

2015/12/04 Javascript

简单实现node.js图片上传

2016/12/18 Javascript

jQuery学习之DOM节点的插入方法总结

2017/01/22 Javascript

微信扫码支付零云插件版实例详解

2017/04/26 Javascript

基于javascript 显式转换与隐式转换(详解)

2017/12/15 Javascript

vue之父子组件间通信实例讲解(props、$ref、$emit)

2018/05/22 Javascript

Vue使用vue-area-linkage实现地址三级联动效果的示例

2018/06/27 Javascript

Angular5中状态管理的实现

2018/09/03 Javascript

ios中视频的最后一桢问题解决

2019/05/14 Javascript

js获取对象,数组所有属性键值(key)和对应值(value)的方法示例

2019/06/19 Javascript

[06:07]辉夜杯现场观众互动 “比谁远送显示器”

2015/12/26 DOTA

[01:33]真香警告！DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏

2018/06/26 DOTA

[02:50]【扭转乾坤，只此一招】DOTA2永雾林渊版本开启新篇章

2020/12/22 DOTA

pygame学习笔记（4）：声音控制

2015/04/15 Python

Scrapy使用的基本流程与实例讲解

2018/10/21 Python

Pycharm取消py脚本中SQL识别的方法

2018/11/29 Python

python按键按住不放持续响应的实例代码

2019/07/17 Python

如何利用pygame实现简单的五子棋游戏

2019/12/29 Python

使用Django和Postgres进行全文搜索的实例代码

2020/02/13 Python

台湾团购、宅配和优惠券：17Life

2017/08/14 全球购物

Stutterheim瑞典：瑞典高级外套时装品牌

2019/06/24 全球购物

说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法

2012/05/24 面试题

编码实现字符串转整型的函数

2012/06/02 面试题

如何开启linux的ssh服务

2015/02/14 面试题

内业资料员岗位职责

2014/01/04 职场文书

网络信息管理员岗位职责

2014/01/05 职场文书

上课迟到检讨书

2014/01/19 职场文书

捐款倡议书怎么写

2014/05/13 职场文书

简爱读书笔记

2015/06/26 职场文书

MySQL 自动填充 create_time 和 update_time

2022/05/20 MySQL