如何實現(xiàn)動易官方網(wǎng)站內(nèi)容頁的移動菜單效果？_動易Cms教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
| 本文目錄： 預(yù)備工作 第一個移動菜單效果 第二個移動菜單效果 第三個點擊菜單效果 小提示 |
近來有許多網(wǎng)友詢問動易官方網(wǎng)站內(nèi)容頁的移動菜單效果是如何實現(xiàn)的，這個方式其實也是動易2006版書簽式操作界面的實現(xiàn)方法�，F(xiàn)將相關(guān)方法說明如下：
預(yù)備工作
在制作這個效果前，您先要制作幾張圖片，以作為菜單按鈕在選中狀態(tài)和非選中狀態(tài)時，顯示不同的背景圖片。如：
〈style type="text/css"〉
〈!--
.menu_bottom1
{
width:77px;height:29px;background:url(/uploads/zhizuo/menu_bottom1.gif.gif);font-weight: normal;padding-top:2px;
}
.menu_bottom2
{
width:77px;height:29px;background:url(/Skin/200508/menu_bottom2.gif.gif);line-height: 120%;padding-top:2px;
}
.menu_bottom3
{
width:77px;height:29px;background:url(/Skin/200508/menu_bottom3.gif.gif);font-weight: normal;padding-top:2px;
}
.menu_bottom4
{
width:77px;height:29px;background:url(/Skin/200508/menu_bottom4.gif.gif);line-height: 120%;padding-top:2px;
}
--〉
〈/style〉
上面的CSS定義可以放在特定的網(wǎng)頁或模板的〈head〉中，也可以將這些定義放在系統(tǒng)的風(fēng)格模板中進行調(diào)用。做好這些預(yù)備后，就可以開始制作下面的移動菜單效果了。
第一個移動菜單效果
將鼠標(biāo)移動到各個按鈕上，看下移動菜單的效果：
。