本文目錄：
預(yù)備工作
第一個(gè)移動(dòng)菜單效果
第二個(gè)移動(dòng)菜單效果
第三個(gè)點(diǎn)擊菜單效果
小提示 |
近來(lái)有許多網(wǎng)友詢問(wèn)動(dòng)易官方網(wǎng)站內(nèi)容頁(yè)的移動(dòng)菜單效果是如何實(shí)現(xiàn)的，這個(gè)方式其實(shí)也是動(dòng)易2006版書(shū)簽式操作界面的實(shí)現(xiàn)方法。現(xiàn)將相關(guān)方法說(shuō)明如下：
預(yù)備工作
在制作這個(gè)效果前，您先要制作幾張圖片，以作為菜單按鈕在選中狀態(tài)和非選中狀態(tài)時(shí)，顯示不同的背景圖片。如：
以下是風(fēng)格定義代碼：
〈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)頁(yè)或模板的〈head〉中，也可以將這些定義放在系統(tǒng)的風(fēng)格模板中進(jìn)行調(diào)用。做好這些預(yù)備后，就可以開(kāi)始制作下面的移動(dòng)菜單效果了。
第一個(gè)移動(dòng)菜單效果
將鼠標(biāo)移動(dòng)到各個(gè)按鈕上，看下移動(dòng)菜單的效果：
