使用圖片和CSS實現(xiàn)翻轉(zhuǎn)效果菜單技巧

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

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

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

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

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

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

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

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

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

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

本文題目：使用圖片和CSS實現(xiàn)翻轉(zhuǎn)效果菜單技巧
標(biāo)題網(wǎng)址：http://www.bm7419.com/news27/278777.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、軟件開發(fā)、網(wǎng)站設(shè)計、微信公眾號、移動網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

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