多级导航菜单, 是指菜单存在多个层次, 层层嵌套, 当鼠标移动到某个菜单时, 如果其包含子菜单则将相应的子菜单显示出来. 本文将提供此功能在 WordPress 的实现方法, 一般的 HTML 页面和其他程序也可以加工套用.
时隔 9 个多月, 关于导航菜单的话题又回来了. 上次写到三级菜单就不写了是因为我发现自己根本用不上, 就没去研究. 最近我在做一个小玩意儿用到了这个, 所以把它给做了出来并集成到 iNove 主题上. 因为内容繁多, 所以还是以之前的文章和代码作为基础来展开讲解, 希望这个文章会对大家有所帮助.
JavaScript 是很好的发明, 它让网页动了起来. 大家都喜欢这样的那样的页面效果, 所以 JS 的使用日益广泛, 甚至被依赖. 但你务必提醒自己, 绝大多数的浏览器都支持 JavaScript, 但不是全部.
上一篇文章中我简单地讲解了如何使用 JavaScript 实现滑动置顶效果. 那段调用 JS 代码的 HTML 片段曾经被我修改过两次. 这次我们将会以它为例, 讲解为什么不能完全依赖 JavaScript 并如何进行处理.
一般网页的下方都会放置一个置顶按钮, 尤其是页面底部没有导航的网页, 这样可以帮助访客重新找到导航或者重温一遍广告 (想得真美). 随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.
首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...
搜索框文字提示并不难实现, 但是对用户来说肯定是个不错的提示. 之前我写了一个文章, 介绍使用 jQuery 实现 WordPress 搜索框添加文字提示, 没想到大家会对此感兴趣, 但是一些朋友对使用大量 JavaScript 实现该功能感到不解. 所以本文作为上一篇的延续, 以说清楚我为何要如此实现, 并详细的描述我的设计思路以及实现方法.
在浏览网页的时候, 我们经常会看到很多人在他们网站的搜索栏里显示文字提示, 当鼠标点击搜索栏, 则提示信息消失. 如在 Nicky 的博客中, 我发现了下图中的搜索栏.
在搜索栏中添加这样的提示信息, 可以引导访客对网站进行搜索, 对技术类, 分享类网站尤其有效.
为什么要用 JavaScript 输出页面代码呢? 是为了不被搜索引擎找到他们. 也就是说, 不让搜索引擎关注这些内容, 而突出你网站的其他更有价值的内容. 比如, 一个做音乐的网站肯定不希望搜索引擎收录它的存档月份, 因为没有人会通过这个来搜索进来. 这我们就可以用 JavaScript 输出这部分内容.
本人正在使用的 iNove 和我发布的最大区别是在 SEO 上, 你可以查看一下页面代码, 我的侧边栏很多内容都是 JavaScript 输出的. 因为侧边栏一般起到导航作用, 但它杂乱, 不能指明中心内容, 这就是为什么将 Google Adsense 放侧边栏经常会显示 "性病广告".
那怎么用 JavaScript 输出内容呢? 下面我们以本人侧边栏的 WP-RecentComments widget 为例说明一下:
前些天我在博客上换上了 LavaLamp 的菜单效果, 很多朋友问我这个是怎么弄的, 下面我会手牵手教你的, follow me...
If you wanna English tutorial, please visit Add LavaLamp Menu to iNove Theme.
本文介绍的是如何在 iNove 主题中添加鼠标悬浮显示 @ 评论的功能. 或许我说得不准确, 但我真不知道该怎么描述. 比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的:
@A
How much money do you have?
就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中.
JavaScript 的命名空间并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问, 这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.
1. JavaScript 是不会禁止你重复定义函数和变量的, 但他只会使用最后定义的版本, 也就是说, 这将导致前面的失效, 令系统出错. 比如, $(id) 是最常用的, 也许你会毫不犹豫的在自己的脚本上定义这个函数, 但是当你用上 prototype, 你就会发现, 它和 prototype 的函数冲突, 并导致你的页面跑不动了. 怎么办? 这时候就需要命名空间了. 我发布的主题里面的 JavaScript 都有用命名空间包起来的, 我这么做就是为了防止和某些插件的代码发生冲突.
2. 如果你要为自己准备一套常用的函数, 或者自己搭建一个 framework, 那这个方法可以使你的代码维护起来更加方便.
说到 JavaScript 的初始化装载, 可能 onload 是被立刻想到的方法. 但很遗憾, 这是最坏的选择, 我以前也一直犯过这样的错误. 为什么说它不好呢? 因为 onload 不是在 document 加载完成的时候调用的, 而是在页面所有元素 (包括图片等) 全部加载完成才会调用. 也就是说, 如果你的页面上有个尺寸很大的图片, 下载需要很长时间, 那么你的脚本就一直不能被初始化, 直到图片装载完成, 严重影响用户体验.
幸运的是, 在 W3C 中有个叫 DOMContentLoaded 的事件, 故名思意, 它会在 DOM (文档对象模型) 被加载完成的时候触发. 那么我们就可以通过下面的方法调用初始化脚本的方法了.
document.addEventListener("DOMContentLoaded", init, false);
所谓 @ 回复, 就是在评论者名字前添加 '@' 标记, 不涉及评论内容的, 生成带链接的代码并追加到评论输入框中.
我不喜欢那种结构复杂的, 难以维护的嵌套回复, 而是经常使用 @ 回复. 为此我写了个 JavaScript 脚本, 其中包括了这部分的处理.
滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.
这里只列出与淡入淡出菜单实现有所不同的地方, 对于以前说过的问题不再重复. 如有疑惑请先查看之前几篇相关的文章, 也欢迎在此留言交流.
有前两篇关于导航菜单的基础, 这个淡入淡出效果会显得比较简单. 菜单我们已经做出来了, 下拉效果我们已经出来了, 说白了就是要在这些基础上加一个渐变效果而已, 或呈现, 或褪去.
本文只对渐变处理作展开讨论, 其他请参考前两篇关于导航菜单的文章, 文章链接你可以在本文相关话题中找到.
前一篇已经讨论过如何创建 WordPress 导航菜单, 这回我们继续导航菜单的话题, 创建一个二级导航菜单. 如果你还不知道如何创建一个简单的导航菜单, 建议你先看看上一篇, 相关内容本文不再重复.
原本计划分两种方法来讨论这个二级导航菜单, 即 CSS 方式和 JavaScript 方式. 但由于我不知道 CSS 的该从何说起, IE 处理相当麻烦, 并且它与后面的话题也没有太多承接关系. 所以决定撤掉那个话题, 现在只讨论以 JavaScript 实现二级导航菜单. 你很快就能发现写 JavaScript 会比较快乐的. 
经过前面几回, 我们已经将想法作成了一个简单的插件, 先回顾一下吧:
将 Blogroll 分为两栏 (1)
将 Blogroll 分为两栏 (2)
将 Blogroll 分为两栏 (3)
插件的基本功能都实现了, 但它的不足也是显而易见的, 当链接超过 30 个的时候, widget 还是会变得很长. 可能你会想到限制显示数量并采用随机显示, 用公平的方式显示少量链接以达到界面的美观. 但很遗憾, 当你想找到某人的链接时, 可能刷新好几次页面都无法将你想要的显示出来. 所以我们还需要一个功能, 将所有链接都显示出来, 而我们显示所有时不需要重载页面. 翻页? 没必要吧. 我相信你不会有 100 个链接, 假如你有, 你一定会将他们进行分类的.