使用圖片和CSS實現翻轉效果菜單技巧

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

創建這種圖片+CSS翻轉菜單項的方法如下：

首先到菜單對應的模塊(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文件必須可讀寫。 現在在樣式表中為菜單項設置“真正的”背景圖片。

示例代碼如下：

#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名稱，因為item28是對應著我的菜單項的標識。你可以在你的菜單項管理中找到你的菜單項的id數字。

你必須為每一個菜單項都增添上面那樣的樣式代碼；這段代碼中設置了默認狀況與鼠標懸停狀況下的兩種樣式。

當然，你也可以為當前選中的菜單項單獨設置另一種背景樣式，只需要為該菜單項再添加一段樣式代碼，例如：

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

但是當這個當前的菜單項處于鼠標懸停狀況時，它的背景是不會改變的，所以假如需要，則還要添加下面這段代碼：

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

這樣我們就得到了一個不錯的圖片+CSS的翻轉菜單，無需任何javascript或額外的模塊。

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

本文題目：使用圖片和CSS實現翻轉效果菜單技巧
標題網址：http://m.kartarina.com/news27/278777.html

成都網站建設公司_創新互聯，為您提供Google、軟件開發、網站設計、微信公眾號、移動網站建設、自適應網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯