首页 > Wordpress心得 > 用jQuery实现WordPress左侧滚动导航栏效果

用jQuery实现WordPress左侧滚动导航栏效果

2010年8月15日 AEROFISH 13,074 views 发表评论 阅读评论

刚从园子博客中学了WordPress左侧滚动导航栏效果,我的博客中也用上了。有必要将操作过程作个记录。

左侧滚动条效果说明图

这里用WordPress的inove主题为例,其它博客实现原理类似。

(代码看懂前提需掌握Html、Css、JavaScript、Php、jQuery。)

1.在主题文件footer.php中添加如下代码:

<!-- shangxia START -->
 <div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<!-- shangxia END -->

注意要加在body结束标签之前。

2.在主题文件header.php的head区域添加如下代码:

	<!-- shangxia START -->
	<?php if (is_single()) { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/shangxia-single.css" type="text/css" />
	<?php } else { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/shangxia-other.css" type="text/css" />
	<?php } ?>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
	<!--
	jQuery(document).ready(function($){
	var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
	$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
	$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
	$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
	$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
	});
	-->
	</script>
	<!-- shangxia END -->

说明:这步通过条件语句判断加载不同的CSS文件,然后是调用了jQuery类库,并添加效果代码。其中<?php bloginfo(’stylesheet_directory'); ?>为主题对应的目录。

3.在主题目录中创建shangxia-single.css文件,内容为:

/* shangxia-single START */
#shangxia{position:absolute;top:40%;left:50%;margin-left:-503px;display:block;}
#shang{background:url(img/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(img/shangxia.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(img/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
/* shangxia-single END */

说明:其中margin-left:-503px中的值,需要根据自己网站的显示效果自行调试,负值越大越靠近左侧屏幕边缘。
4.在主题目录中创建shangxia-other.css文件,内容为:

/* shangxia-other START */
#shangxia{position:absolute;top:40%;left:50%;margin-left:-503px;display:block;}
#shang{background:url(img/shangxia.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#xia{background:url(img/shangxia.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
/* shangxia-other END */

5.准备好图片素材,到主题的img目录中:

这个文件尺寸为32x119,其必须和第3、4步的css代码相配合才行。

6.最后,上传素材和修改的文件,并微调导航栏的位置。

【资料参考园子博客http://www.yzznl.cn/archives/add-site-navigation.html

【最后修改时间:2011年1月22日】

本文对我无帮助,减1分本文对我有帮助,加1分(本文对您有帮助吗?目前总-1分,1参与者。)
Loading ... Loading ...

  1. 2010年10月13日16:05 | #1

    呵呵 这个东西很实用

    [嵌套回复]

  2. 2010年11月2日17:12 | #2

    没有看你调用shangxia.gif。所以没成功

    [嵌套回复]

    爱惜 , 回复:

    没看到下面的CSS。搞定。谢谢。

    [嵌套回复]

  3. 2011年1月22日09:49 | #3

    为什么我弄出来不行呢?博主能去我网站看看么?调试出来不能动,中间的评论也不出现

    [嵌套回复]

    AEROFISH , 回复:

    你好!

    我刚看了,原来我这里贴的代码有点错误,导致你直接粘贴后不能用。

    我现在正在修改。

    [嵌套回复]

    网不住 , 回复:

    嗯,ok了,可以用了

    [嵌套回复]

    AEROFISH , 回复:

    你好,我现在改好了,你把我这里第2段代码的第7行,按现在的重新替换下。就是原先这行有问题。

    幸好你提问了,要不然这个错误我还发现不了。万分感谢!

    [嵌套回复]

    网不住 , 回复:

    呵呵,好的,我修改一下看看··

    [嵌套回复]

  4. 2011年8月18日21:25 | #4

    路过,我用你的方法了~~很给力,但是我想问的是你的那个高两代马上的工具栏怎么弄得?为什么我的插件没有?

    [嵌套回复]

    AEROFISH , 回复:

    你好!我用的是SyntaxHighlighter这款插件。

    [嵌套回复]

    蝎紫 , 回复:

    貌似我也是啊、、为什么显示只有代码?真是无语

    [嵌套回复]

  5. 2012年2月8日11:59 | #5

    有没有在左侧的主题啊》
    太强大了!

    [嵌套回复]

  6. 2012年6月14日10:53 | #6

    我想问一下,通过上面的代码在IE 8 浏览器中不能用,但在其它的浏览器又可以用,是怎么回事。

    [嵌套回复]

    AEROFISH , 回复:

    我这边IE8、火狐都正常的。

    [嵌套回复]

  7. 2012年7月1日16:12 | #7

    博主 貌似我的网站也不能用~~ 求帮助

    [嵌套回复]

  8. 2012年7月11日16:58 | #8

    谢谢,用了你的方法,能用了

    [嵌套回复]

  9. 2012年7月11日16:59 | #9

    但是有个问题,文章没有评论的时候好像点评论没反应

    [嵌套回复]

  10. 2012年9月27日00:10 | #10

    我也添加这个功能了,效果不错。

    [嵌套回复]

  11. 2013年5月7日14:34 | #11

    纠结不是我想要的,不过还是很有帮助的说。

    [嵌套回复]

  1. 2010年12月18日12:34 | #1
  2. 2011年4月8日22:36 | #2
  3. 2011年6月13日21:50 | #3
  4. 2011年8月18日21:26 | #4
  5. 2011年8月21日18:05 | #5
  6. 2011年11月26日10:30 | #6
  7. 2012年4月15日05:37 | #7
  8. 2013年4月5日12:02 | #8