如何实现动易官方网站内容页的移动菜单效果？_动易Cms教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
| 本文目录： 预备工作 第一个移动菜单效果 第二个移动菜单效果 第三个点击菜单效果 小提示 |
近来有许多网友询问动易官方网站内容页的移动菜单效果是如何实现的，这个方式其实也是动易2006版书签式操作界面的实现方法。现将相关方法说明如下：
预备工作
在制作这个效果前，您先要制作几张图片，以作为菜单按钮在选中状态和非选中状态时，显示不同的背景图片。如：
〈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〉中，也可以将这些定义放在系统的风格模板中进行调用。做好这些预备后，就可以开始制作下面的移动菜单效果了。
第一个移动菜单效果
将鼠标移动到各个按钮上，看下移动菜单的效果：
。