博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用jQuery实现WordPress侧边上下滚动导航条效果
阅读量:6672 次
发布时间:2019-06-25

本文共 1159 字,大约阅读时间需要 3 分钟。

hot3.png

转自:

用jQuery实现WordPress侧边上下滚动导航条效果,此方法不是很智能没有添加PHP判断,纯手手工添加和修改的。具体实现方法如下:

1、下载,解压后把里边的图片上传到网站主题模板的images文件夹中。

2、在当前主题模板的CSS文件中添加如下代码:

/* shangxia */#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}  /* 使用fixed使id="shangxia"的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),然后向左移动520px(需自行调整!!!) */ #shang{background:url(images/shang.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #xia{background:url(images/xia.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;} #comt{background:url(images/comt.png) no-repeat;position:relative;cursor:pointer;height:48px;width:48px;margin:10px 0;}

3、在 主题模板的 顶部 (header.php) 文件的 head 部分添加如下代码:

4、做好之前的几步以后就是在对应该的地方添加调用。

  要在这些主题模板文件中添加对应该的调用代码(随便什么位置都可以添加),分别是:

  首页模板 (index.php)文件中添加

    
    

  文章归档 (archive.php)文件中添加

    
    

  页面模板 (page.php)文件中添加

  文章页面 (single.php)文件中添加

  首先确保你的页面已经加载 jQuery Javascript 库 如果没有可以在header.php模板文件 head 部分添加:

  OK,大功告成,效果如下:

转载于:https://my.oschina.net/shunshun/blog/100029

你可能感兴趣的文章
新版 Win 10 针对中国市场,改善简体中文输入体验
查看>>
《众妙之门——自由网站设计师成功之道》一1.7 像专业人士一样出击
查看>>
百度 360 诉讼案宣判 360 败诉
查看>>
《SolidWorks 2016中文版机械设计从入门到精通》——2.3 草图编辑
查看>>
《OpenGL编程指南》一1.5 第一个程序:深入分析
查看>>
Reddit 事实核查新方法,人为劝导和智能算法结合
查看>>
Chrome 57 Beta 新特性 改进了 Add to Home Screen
查看>>
Java 学习线路图是怎样的?
查看>>
Spark源码分析 – DAGScheduler
查看>>
《设计模式解析(第2版•修订版)》—第1章 1.6节面向对象范型
查看>>
《手机测试Robotium实战教程》—第2章2.2节Eclipse的安装
查看>>
《Android游戏开发详解》一2.2 设置开发机器
查看>>
《数据分析变革:大数据时代精准决策之道》一第2章 更多数据……巨多数据……大数据!...
查看>>
《万物互联》——2.5 审视无线技术
查看>>
IO调度算法学习
查看>>
《制造业中的机器人、自动化和系统集成》—— 3.8 安全与防护
查看>>
MariaDB Galera Cluster 部署
查看>>
《游戏机制——高级游戏设计技术》一2.4 渐进型游戏
查看>>
《系统分析师UML项目实战》—第1章1.1节现场的作业程序
查看>>
android 添加React Native支持
查看>>