js实现改进的仿蓝色论坛导航菜单效果代码
本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款改进的仿蓝色论坛导航菜单，滑动门级的导航菜单，网址跟踪链接的JS导航菜单，可以支持二级的菜单。为改善用户体验，加了延时。其原理是将链接地址和网址比较，如果一致，则加强该链接和上级链接的显示。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/
具体代码如下：
<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实现的论坛Ajax打分效果完整实例
本文实例讲述了JS实现的论坛Ajax打分效果.分享给大家供大家参考,具体如下: 这是论坛常见的一种Ajax打分效果,使用了Discuz老版论坛的就有此种效果,目前有很多网站也有类似的,分享给大家吧,我觉得非常实用的Ajax评分效果,使用了一个背景图片,自己可以下载. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dicuz-ajax-df-plugs-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
python实现的登陆Discuz!论坛通用代码分享
代码如下: #coding:gbk import urllib2,urllib,cookielib,re ''' 通用的登陆DZ论坛 参数说明parms: username:用户名(必填), password :密码(必填), domain:网站域名,注意格式必须是:http://www.xxx.xx/(必填), answer:问题答案, questionid:问题ID, referer:跳转地址 这里使用了可变关键字参数(相关信息可参考手册) ''' def login_dz(**parms)
-
java使用httpclient模拟post请求和get请求示例
复制代码 代码如下: import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader; import org.apache.commons.httpclient.DefaultHttpMethodRetryHandler;import org.apache.commons.httpclient.Header;import org
-
PHPWind 发帖回帖Api PHP版打包下载
发帖演示: 次数: 5 地址: http://localhost/Test/upload/post.php?fid=5 完成时间: 2010-02-04 05:49:27 [ 发帖完毕点击进入主题列表 ] 灌水预防机制已经打开,在5秒内不能发帖 [ 发帖完毕点击进入主题列表 ] 灌水预防机制已经打开,在5秒内不能发帖 [ 发帖完毕点击进入主题列表 ] 共发送5次. 回帖演示: 次数: 5 地址: http://localhost/Test/upload/read.php?tid=41&page=
-
java实现http的Post、Get、代理访问请求
本文实例讲解了java实现http的Post.Get.代理访问请求的详细代码片段,分享给大家供大家参考,具体内容如下 package com.snowfigure.kits.net; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStreamWriter; im
-
Java模拟HTTP Get Post请求实现论坛自动回帖功能
最近想自动发帖回帖,拿某论坛试验了一下,发现可行,不过后续没有再使用,以免影响论坛正常运行. 1.帖子链接的格式为 http://bbs.***.***.**/forum.php?mod=viewthread&tid=774210 最后面774210数字变化, 就可以得到不同的帖子 2.防止帖子发表会又被删了的情况, 进行判断帖子是否存在 3.递增后面的 id 数字, 对每个链接做回帖的 POST 请求 重难点 回帖需要用户登录信息 一种是利用Cookie 另一种是进行模拟登录 本文采用前者 判
-
php discuz 主题表和回帖表的设计
以下内容仅摘录部分:如果由我们来设计主题表和回帖表,通常的做法是如下. 这样在获取主题列表时,直接使用分页算法提取Topics:查看某一帖子时,还需要对Topics,Posts进行jion链接. 此种设计的缺陷为: 1. Topics表存储Content的内容,其体积将会很大,对大体积表进行分页,性能很慢. 2. 显示Posts内容时将进行join操作,损耗性能 而Discuz的做法是进行如下设计. 将Topics里的Content拆分到Posts中去,同时Topic
-
php通过curl模拟登陆DZ论坛
libcurl同时也支持HTTPS认证.HTTP POST.HTTP PUT. FTP 上传(这个也能通过PHP的FTP扩展完成).HTTP 基于表单的上传.代理.cookies和用户名+密码的认证. <?php $discuz_url = 'http://www.jb51.net/';//论坛地址 $login_url = $discuz_url .'login.php?action=login';//登录页地址 $post_fields = array(); //以下两项不需要修改 $pos
-
Java模拟HTTP Get Post请求 轻松实现校园BBS自动回帖
本文实例为大家分享了Java模拟HTTP Get Post请求,校园BBS自动回帖功能,供大家参考,具体内容如下 设计思路 找到帖子链接的集合,最后面数字变化, 就可以得到不同的帖子 防止帖子发表会又被删了的情况, 进行判断帖子是否存在 遍历这个集合, 对每个链接做回帖的POST请求 重难点 Note: 回帖需要用户登录信息 一种是利用Cookie 另一种是进行模拟登录 本文采用前者 代码 代码比较简单,注意事项是找到自己的Cookie,赋给String yourCookeie就可以直接运行 主
-
java发送http的get、post请求实现代码
Http请求类 package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.URL; import java.net.URLConnection; import java.util.List; import java.util.Map; public