首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 06, 2015

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

这是一款改进的仿蓝色论坛导航菜单，滑动门级的导航菜单，网址跟踪链接的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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
详解参数传递四种形式
Jul 21 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
ES6字符串的扩展实例
Dec 21 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
表约束(2) ESXI(1) caddy(1) Master(1) variables(1) Slave(1) NginxConfig(1) 主从复制(1) transaction(1) SVN(1)
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
php递归方法实现无限分类实例代码
2014/02/28 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python中偏函数partial用法实例分析
2015/07/08 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python画图高斯分布的示例
2019/07/10 Python
Python中注释（多行注释和单行注释）的用法实例
2019/08/28 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
BabyBjörn婴儿背带法国官网：BabyBjorn法国
2018/06/16 全球购物
教师自我剖析材料（四风问题）
2014/09/30 职场文书
检察院起诉意见书
2015/05/20 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技