首先，我們不需要修改任何php文件。在后來(lái)的Joomla版本中，為菜單項(xiàng)添加圖片已經(jīng)成為Joomla原生的功能之一。

創(chuàng)建這種圖片+CSS翻轉(zhuǎn)菜單項(xiàng)的方法如下：

首先到菜單對(duì)應(yīng)的模塊(module)設(shè)置中的Other Parameters選項(xiàng)卡里面，將“顯示菜單圖標(biāo)(display menu icons)”與“為菜單圖標(biāo)添加鏈接(link menu icons)”設(shè)置為許可。 向images/stories文件夾中上傳一個(gè)1像素見(jiàn)方的白色(或與任何其他頁(yè)面背景相同顏色)的gif圖片(占位圖片)。 進(jìn)入菜單項(xiàng)對(duì)應(yīng)的管理頁(yè)面。 在該菜單項(xiàng)管理頁(yè)面中，打開(kāi)右側(cè)的Parameters(System)選項(xiàng)卡，在Menu Image中選擇之前上傳的gif文件。 重復(fù)2-4步，為所有的菜單項(xiàng)設(shè)置好Menu Image圖片。 查看你的站點(diǎn)前臺(tái)頁(yè)面，現(xiàn)在所有的菜單項(xiàng)應(yīng)該是一片空白了，別憂慮，我們接下來(lái)要解決這個(gè)問(wèn)題。 打開(kāi)你所使用模板的template.css文件；假如你通過(guò)管理后臺(tái)直接編輯樣式表，則需要確保該CSS文件必須可讀寫。 現(xiàn)在在樣式表中為菜單項(xiàng)設(shè)置“真正的”背景圖片。

示例代碼如下：

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

就是這樣了。在我的例子中，我使用item28作為class名稱，因?yàn)閕tem28是對(duì)應(yīng)著我的菜單項(xiàng)的標(biāo)識(shí)。你可以在你的菜單項(xiàng)管理中找到你的菜單項(xiàng)的id數(shù)字。

你必須為每一個(gè)菜單項(xiàng)都增添上面那樣的樣式代碼；這段代碼中設(shè)置了默認(rèn)狀況與鼠標(biāo)懸停狀況下的兩種樣式。

當(dāng)然，你也可以為當(dāng)前選中的菜單項(xiàng)單獨(dú)設(shè)置另一種背景樣式，只需要為該菜單項(xiàng)再添加一段樣式代碼，例如：

#pillmenu li#current.item28 a {
background: url(../images/home-current.png) 0 0 no-repeat;
}

但是當(dāng)這個(gè)當(dāng)前的菜單項(xiàng)處于鼠標(biāo)懸停狀況時(shí)，它的背景是不會(huì)改變的，所以假如需要，則還要添加下面這段代碼：

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

這樣我們就得到了一個(gè)不錯(cuò)的圖片+CSS的翻轉(zhuǎn)菜單，無(wú)需任何javascript或額外的模塊。

另外，我所修改的pillmenu菜單就是對(duì)應(yīng)著上面示例代碼中的#pillmenu。假如你使用并修改其他菜單，需要確保使用其響應(yīng)的ID來(lái)替代掉“#pillmenu”。你可以在模板的HTML代碼中找到你所使用的菜單的ID。