在 WordPress 导航菜单的使用篇中, 已经介绍过 WP 3.0 导航菜单这一新功能. 在老版本的 WordPress 上, 页面列表和分类列表一直被用作导航菜单, 现在引入该功能, 我们应该怎样选择或者兼容两者呢? 本文将更加深入, 在代码层面继续发掘其更多特性. 在看到这些特性之后, 或许能勾起你的一些头绪.
关于导航菜单的使用方法, 请查看使用篇的介绍, 本文将侧重于主题开发.
WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 本文将会介绍并教你如何使用 WordPress 的导航菜单.
制作 Notepad 主题的时候, 我 (作者) 学了一些新的 CSS3 特性, 我想跟大家分享一下. 请看这个 Demo, 这是一个 Mac 风格的多级下拉菜单. 我创建这个效果使用了 border-radius, box-shadow, 和 text-shadow 属性. 它在 Firefix, Safari 和 Chrome 上的渲染效果都很赞. 下拉菜单也可以在一些不兼容 CSS3 的浏览器中使用, 比如: IE7+, 不过圆角和阴影效果不会被渲染.
已经写了好几个关于网页导航菜单的教程了, 我都是用原生 JavaScript 敲的代码, 一方面是为了读者更好地去理解其中的原理, 另一方面是让程序可以在不加载任何 framework 的情况下正常运行. 但是时间长了, 我发现越来越多人问我如何将这些效果集成到一些 JS 框架上, 尤其是 jQuery. 所以, 本节我们不探讨更多的效果, 而是将之前的一些菜单效果用 jQuery 来实现出来.
这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.
WordPress 上, 我们一般会将页面列表或者分类列表做成导航栏. 但无论是页面还是分类, 都存在个小问题, 当鼠标悬停在导航项时就是出现讨厌的提示信息, 也就是标签上的 title 信息. 下面我会告诉大家如何去除这些讨厌的提示信息. (以页面列表为例)
现在 iNove 主题的菜单上使用一个小屋图标来代替首页文字, 我觉得这是一种形象而友好的 UI 表示, 但是很多人问我如何将它换成相关的文字. 好吧, 下面我将将告诉你如何把它更换掉.
不喜欢小屋图标的人无非两种. 其一, 确切的不喜欢他的外观, 认为用户会对此产生歧义或者不够显眼; 其二, 认为这个小屋是个图片, 对搜索引擎不友好.
对于第一种人, 你们可以直接转跳至下面的更换教程.
对于第二种人, 我觉得你们需要知道, 它实质上并不是图片, 是通过 CSS 让文字隐藏起来而只显示背景图片, 它是文字, 不存在对搜索引擎很不友好的事情. (这一点可以通过去除 style.css 来验证)
多级导航菜单, 是指菜单存在多个层次, 层层嵌套, 当鼠标移动到某个菜单时, 如果其包含子菜单则将相应的子菜单显示出来. 本文将提供此功能在 WordPress 的实现方法, 一般的 HTML 页面和其他程序也可以加工套用.
时隔 9 个多月, 关于导航菜单的话题又回来了. 上次写到三级菜单就不写了是因为我发现自己根本用不上, 就没去研究. 最近我在做一个小玩意儿用到了这个, 所以把它给做了出来并集成到 iNove 主题上. 因为内容繁多, 所以还是以之前的文章和代码作为基础来展开讲解, 希望这个文章会对大家有所帮助.
这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.
演示页面: Demo: CSS Menu Design
原文链接: CSS: Menu List Design
滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.
这里只列出与淡入淡出菜单实现有所不同的地方, 对于以前说过的问题不再重复. 如有疑惑请先查看之前几篇相关的文章, 也欢迎在此留言交流.
有前两篇关于导航菜单的基础, 这个淡入淡出效果会显得比较简单. 菜单我们已经做出来了, 下拉效果我们已经出来了, 说白了就是要在这些基础上加一个渐变效果而已, 或呈现, 或褪去.
本文只对渐变处理作展开讨论, 其他请参考前两篇关于导航菜单的文章, 文章链接你可以在本文相关话题中找到.
前一篇已经讨论过如何创建 WordPress 导航菜单, 这回我们继续导航菜单的话题, 创建一个二级导航菜单. 如果你还不知道如何创建一个简单的导航菜单, 建议你先看看上一篇, 相关内容本文不再重复.
原本计划分两种方法来讨论这个二级导航菜单, 即 CSS 方式和 JavaScript 方式. 但由于我不知道 CSS 的该从何说起, IE 处理相当麻烦, 并且它与后面的话题也没有太多承接关系. 所以决定撤掉那个话题, 现在只讨论以 JavaScript 实现二级导航菜单. 你很快就能发现写 JavaScript 会比较快乐的. 
导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.
WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.
可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.