本文目錄：
預備工作
第一個移動菜單效果
第二個移動菜單效果
第三個點擊菜單效果
小提示 |
近來有許多網友詢問動易官方網站內容頁的移動菜單效果是如何實現的，這個方式其實也是動易2006版書簽式操作界面的實現方法?，F將相關方法說明如下：
預備工作
在制作這個效果前，您先要制作幾張圖片，以作為菜單按鈕在選中狀態和非選中狀態時，顯示不同的背景圖片。如：
以下是風格定義代碼：
〈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定義可以放在特定的網頁或模板的〈head〉中，也可以將這些定義放在系統的風格模板中進行調用。做好這些預備后，就可以開始制作下面的移動菜單效果了。
第一個移動菜單效果
將鼠標移動到各個按鈕上，看下移動菜單的效果：
