使用图片和CSS实现翻转效果菜单技巧

 wfA中国设计秀

首先，我们不需要修改任何php文件。在后来的Joomla版本中，为菜单项添加图片已经成为Joomla原生的功能之一。wfA中国设计秀

创建这种图片+css翻转菜单项的方法如下：wfA中国设计秀

首先到菜单对应的模块(module)设置中的Other Parameters选项卡里面，将“显示菜单图标(display menu icons)”与“为菜单图标添加链接(link menu icons)”设置为允许。 向images/stories文件夹中上传一个1像素见方的白色(或与任何其他页面背景相同颜色)的gif图片(占位图片)。 进入菜单项对应的管理页面。 在该菜单项管理页面中，打开右侧的Parameters(System)选项卡，在Menu Image中选择之前上传的gif文件。 重复2-4步，为所有的菜单项设置好Menu Image图片。 查看你的站点前台页面，现在所有的菜单项应该是一片空白了，别担心，我们接下来要解决这个问题。 打开你所使用模板的template.css文件；如果你通过管理后台直接编辑样式表，则需要确保该css文件必须可读写。 现在在样式表中为菜单项设置“真正的”背景图片。

示例代码如下：wfA中国设计秀

#pillmenu li.item28 a {wfA中国设计秀
  width: 31px;wfA中国设计秀
  height:28px;wfA中国设计秀
  background: url(../images/home.png) 0 0 no-repeat;wfA中国设计秀
}wfA中国设计秀
#pillmenu li.item28 a:hover {wfA中国设计秀
  background: url(../images/home-over.png) 0 0 no-repeat;wfA中国设计秀
}

就是这样了。在我的例子中，我使用item28作为class名称，因为item28是对应着我的菜单项的标识。你可以在你的菜单项管理中找到你的菜单项的id数字。wfA中国设计秀

你必须为每一个菜单项都增加上面那样的样式代码；这段代码中设置了默认状态与鼠标悬停状态下的两种样式。wfA中国设计秀

当然，你也可以为当前选中的菜单项单独设置另一种背景样式，只需要为该菜单项再添加一段样式代码，例如：wfA中国设计秀

#pillmenu li#current.item28 a {wfA中国设计秀
  background: url(../images/home-current.png) 0 0 no-repeat;wfA中国设计秀
}

但是当这个当前的菜单项处于鼠标悬停状态时，它的背景是不会改变的，所以如果需要，则还要添加下面这段代码：wfA中国设计秀

#pillmenu li#current.item28 a:hover {wfA中国设计秀
  background: url(../images/home-current-over.png) 0 0 no-repeat;wfA中国设计秀
}

这样我们就得到了一个不错的图片+css的翻转菜单，无需任何Javascript或额外的模块。wfA中国设计秀

另外，我所修改的pillmenu菜单就是对应着上面示例代码中的#pillmenu。如果你使用并修改其他菜单，需要确保使用其相应的ID来替换掉“#pillmenu”。你可以在模板的HTML代码中找到你所使用的菜单的ID。wfA中国设计秀