您当前的位置: 首页 > 养生

爲WordPress30嘚自定义菜单链接

2018-10-26 14:03:40

WordPress 3.0 为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance(外观)-》 Menus(菜单)面板里我们可quo;Add to Menu可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少,这时点击屏幕左上角的Screen Options(屏幕参数),把Show advanced menu properties(显示高级菜单属性)里的项目全部勾选,我们就可以看到更多的参数。以本文题图为例,为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class,这样在前台调用菜单时,这些项目将拥有一个自定义的 CSS Class,接下来我们可以通过 CSS 为这些项目加上图标。

以下为引用的内容:#header vigation li me {background:url(images/g) no-repeat 0 1px transparent;}#header vigation li out {background:url(images/g) no-repeat 0 0px transparent;}#header vigation li vertise {background:url(images/g) no-repeat 0 0px transparent;}#header vigation li chive {background:url(images/g) no-repeat 1px 2px transparent;}#header vigation li ntact {background:url(images/g) no-repeat 0 3px transparent;}

在 WordPress 3.0 之前的版本里,我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值,再为它加上一个和 title 值相同的 Class,在 jQuery 里可以这样写:

以下为引用的内容:$('vigation li a').addClass(function() {return $(this).attr('title');});});

注:相关站建设技巧阅读请移步到建站教程频道。

万科翡翠天骄
开沟机械
金利大厦
推荐阅读
图文聚焦