如何实现动易官方网站内容页的移动菜单效果？

2024-09-10 21:54:11

字体：大中小

来源：转载

供稿：网友

本文目录：
　　预备工作
　　第一个移动菜单效果
　　第二个移动菜单效果
　　第三个点击菜单效果
　　小提示

　　近来有许多网友询问动易官方网站内容页的移动菜单效果是如何实现的，这个方式其实也是动易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〉