编程 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 相关文章推荐

js限制文本框为整数和货币的函数代码

Oct 13 Javascript

初识Node.js

Sep 03 Javascript

javascript实现根据iphone屏幕方向调用不同样式表的方法

Jul 13 Javascript

js实现表单Radio切换效果的方法

Aug 17 Javascript

jQuery+ajax+asp.net获取Json值的方法

Jun 08 Javascript

JS基础随笔(菜鸟必看篇)

Jul 13 Javascript

Bootstrap基本组件学习笔记之input输入框组(9)

Dec 07 Javascript

详谈Node.js之操作文件系统

Aug 29 Javascript

springMvc 前端用json的方式向后台传递对象数组方法

Aug 07 Javascript

使用Vue.observable()进行状态管理的实例代码详解

May 26 Javascript

jquery css实现流程进度条

Mar 26 jQuery

基于vue hash模式微信分享#号的解决

Sep 07 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

星际争霸任务指南——虫族

2020/03/04 星际争霸

风味层面去分析咖啡油脂

2021/03/03 咖啡文化

我的php学习笔记(毕业设计)

2012/02/21 PHP

php文本转图片自动换行的方法

2013/03/13 PHP

php遍历替换目录下文件指定内容的方法

2016/11/10 PHP

Extjs学习笔记之八继承和事件基础

2010/01/08 Javascript

JQuery 动画卷页返回顶部动画特效(兼容Chrome)

2010/02/15 Javascript

jquery中对表单的基本操作代码

2010/07/29 Javascript

Javascript合并表格中具有相同内容单元格示例

2013/08/11 Javascript

jquery获取子节点和父节点的示例代码

2013/09/10 Javascript

Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)

2017/09/15 Javascript

vue路由跳转传参数的方法

2019/05/06 Javascript

如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

2019/06/18 jQuery

p5.js码绘“跳动的小正方形”的实现代码

2019/10/22 Javascript

Angular处理未可知异常错误的方法详解

2021/01/17 Javascript

Python设计模式编程中Adapter适配器模式的使用实例

2016/03/02 Python

Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地

2018/02/23 Python

Python排序算法之选择排序定义与用法示例

2018/04/29 Python

PyCharm设置SSH远程调试的方法

2018/07/17 Python

Django添加feeds功能的示例

2018/08/07 Python

python join方法使用详解

2019/07/30 Python

Python 使用matplotlib模块模拟掷骰子

2019/08/08 Python

python2和python3实现在图片上加汉字的方法

2019/08/22 Python

Python图像处理库PIL的ImageGrab模块介绍详解

2020/02/26 Python

纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

2012/12/28 HTML / CSS

CSS3圆角和渐变2种常用功能详解

2016/01/06 HTML / CSS

UGG美国官网：购买UGG雪地靴、拖鞋和鞋子

2017/12/31 全球购物

中国汽车租赁行业头部企业：一嗨租车

2019/05/16 全球购物

美国最大的户外装备和服装购物网站：Backcountry

2019/10/15 全球购物

工商管理专业实习大学生自我鉴定

2013/09/19 职场文书

医药代表个人的求职信分享

2013/12/08 职场文书

企业承诺书怎么写

2014/05/24 职场文书

2014年党员自我评价材料

2014/09/22 职场文书

2015年房地产销售工作总结

2015/04/20 职场文书

停课通知书

2015/04/24 职场文书

SQL Server中的逻辑函数介绍

2022/05/25 SQL Server