动易公司服务人员用心为您服务！ 在客户自助服务中您可以获得动易产品和技术服务 还不是动易的客户？马上注册吧 只有登录动易官网会员中心，您才有权利进行一些功能操作哦
您现在的位置： 动易技术中心 >> 模板设计教程 >> 动易模板 >> 正文
[组图]如何实现动易官方网站内容页的移动菜单效果？
作者：雅虎    文章来源：本站原创    点击数：    更新时间：2006-11-23    

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

　　近来有许多网友询问动易官方网站内容页的移动菜单效果是如何实现的，这个方式其实也是动易2006版书签式操作界面的实现方法。现将相关方法说明如下：

准备工作

　　在制作这个效果前，您先要制作几张图片，以作为菜单按钮在选中状态和非选中状态时，显示不同的背景图片。如：

　

　　图片做好后，添加二个风格样式定义，如：

以下是风格定义代码：
<style type="text/css">
<!--
.menu_bottom1
{
width:77px;height:29px;background:url(/Template/UploadFiles_8527/200803/2008031619565486.gif.gif);font-weight: normal;padding-top:2px; 
}
.menu_bottom2
{
width:77px;height:29px;background:url(/Template/UploadFiles_8527/200803/2008031619565419.gif.gif);line-height: 120%;padding-top:2px;
}
.menu_bottom3
{
width:77px;height:29px;background:url(/Lectures/UploadFiles_3793/200612/20061229120536391.gif);font-weight: normal;padding-top:2px; 
}
.menu_bottom4
{
width:77px;height:29px;background:url(/Lectures/UploadFiles_3793/200612/20061229120536800.gif);line-height: 120%;padding-top:2px;
}
-->
</style>

　　上面的CSS定义可以放在特定的网页或模板的<head>中，也可以将这些定义放在系统的风格模板中进行调用。做好这些准备后，就可以开始制作下面的移动菜单效果了。

第一个移动菜单效果

　　将鼠标移动到各个按钮上，看下移动菜单的效果：
“测试按钮1”中要显示的内容

　　下面是上面您所看到效果的代码内容，其中menu_bottom1、menu_bottom2就是您刚才定义的CSS名称：

以下是第一个效果定义的代码内容：
<SCRIPT language=JavaScript>
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
TabTitle[tID].className='menu_bottom1';
TabTitle[ID].className='menu_bottom2';
Tabs[tID].style.display='none';
Tabs[ID].style.display='';
tID=ID;
}
}
</SCRIPT>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td class='menu_bottom2' id='TabTitle' onmouseover='ShowTabs(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs(4)'><a href="#">测试按钮5</a></td>
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody id='Tabs' style='display:'>
<tr>
<td height="50" style="border: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">1</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs' style="display: none;">
<tr>
<td height="50" style="border: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">2</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs' style="display: none">
<tr>
<td height="50" style="border: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">3</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs' style="display: none">
<tr>
<td height="50" style="border: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">4</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs' style="display: none">
<tr>
<td height="50" style="border: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">5</font>”中要显示的内容</td>
</tr>
</tbody>
</table>

第二个移动菜单效果

　　如果在一个页面中同时要显示二个这样的菜单效果也可以，看下面的效果：

“测试按钮1”中要显示的内容

　　下面是上面您所看到效果的代码内容，其中menu_bottom3、menu_bottom4就是您刚才定义的CSS名称：

以下是第二个效果定义的代码内容：
<SCRIPT language=JavaScript>
var t2ID=0;
function ShowTabs2(ID){
if(ID!=t2ID){
Tab2Title[t2ID].className='menu_bottom3';
Tab2Title[ID].className='menu_bottom4';
Tabs2[t2ID].style.display='none';
Tabs2[ID].style.display='';
t2ID=ID;
}
}
</SCRIPT>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
<td class='menu_bottom2' id='Tab2Title' onmouseover='ShowTabs2(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='Tab2Title' onmouseover='ShowTabs2(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='Tab2Title' onmouseover='ShowTabs2(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='Tab2Title' onmouseover='ShowTabs2(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='Tab2Title' onmouseover='ShowTabs2(4)'><a href="#">测试按钮5</a></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody id='Tabs2' style='display:'>
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">1</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs2' style="display: none;">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">2</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs2' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">3</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs2' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">4</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs2' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #ffffff;padding:2;">“测试按钮<font color="#FF0000">5</font>”中要显示的内容</td>
</tr>
</tbody>
</table>

　　请注意，如果页面中有多个此种方式的菜单，每个JS中则要定义不同的对象，如：

以下是第二个ＪＳ代码定义，注意红色处的定义，要与前一个ＪＳ定义不同：
<SCRIPT language=JavaScript> 
var t2ID=0;
function ShowTabs2(ID){
  if(ID!=t2ID){
    Tab2Title[t2ID].className='menu_bottom3';
    Tab2Title[ID].className='menu_bottom4';
    Tabs2[t2ID].style.display='none';
    Tabs2[ID].style.display=''; 
    t2ID=ID;
  }
}
</SCRIPT>

 

第三个点击菜单效果

　　如果将按钮td表格定义中的“onmouseover”改成“onclick”，效果又会是如何了呢？点击下面的按钮试试：

“测试按钮1”中要显示的内容

　　看到效果了吗？现在是点击了才显示相应的内容。这就类似动易2006版书签式操作界面了：

以下是第三个效果定义的代码内容：
<script language=JavaScript>
var t3ID=0;
function ShowTabs3(ID){
if(ID!=t3ID){
Tab3Title[t3ID].className='menu_bottom3';
Tab3Title[ID].className='menu_bottom4';
Tabs3[t3ID].style.display='none';
Tabs3[ID].style.display='';
t3ID=ID;
}
}
</script>
</P>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
<td class='menu_bottom2' id='Tab3Title' onclick='ShowTabs3(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(4)'><a href="#">测试按钮5</a></td>
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody id='Tabs3' style='display:'>
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #FFCC00;padding:2;">“测试按钮<font color="#FF0000">1</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs3' style="display: none;">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #FFCC00;padding:2;">“测试按钮<font color="#FF0000">2</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs3' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background: #FFCC00;padding:2;">“测试按钮<font color="#FF0000">3</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs3' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background:#FFCC00;padding:2;">“测试按钮<font color="#FF0000">4</font>”中要显示的内容</td>
</tr>
</tbody>
<tbody id='Tabs3' style="display: none">
<tr>
<td height="50" style="border-top: 3px solid #E8641B;border-left: 1px solid #E8641B;border-right: 1px solid #E8641B;border-bottom: 1px solid #E8641B;WORD-BREAK: break-all; background:#FFCC00;padding:2;">“测试按钮<font color="#FF0000">5</font>”中要显示的内容</td>
</tr>
</tbody>
</table>

小　提　示

　　不知道您是否注意，上面三个效果的按钮表格有一点小小的不同：

以下是三个效果按钮表格定义的代码内容：

第一个效果按钮表格定义：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td class='menu_bottom2' id='Tab3Title' onclick='ShowTabs3(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(4)'><a href="#">测试按钮5</a></td>
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
</tr>
</table>

第二个效果按钮表格定义：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
<td class='menu_bottom2' id='Tab3Title' onclick='ShowTabs3(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(4)'><a href="#">测试按钮5</a></td>
</tr>
</table>

第三个效果按钮表格定义：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
<td class='menu_bottom2' id='Tab3Title' onclick='ShowTabs3(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='Tab3Title' onclick='ShowTabs3(4)'><a href="#">测试按钮5</a></td>
<td width="*"><img src="/Template/UploadFiles_8527/200803/2008031619565450.gif" width="1" height="1"></td>
</tr>
</table>

　　将空列表放在不同的位置则显示不同的效果。如第一个效果按钮表格定义中，我们要在右侧显示空的距离，一般左侧的各列都要定义其宽度，最右侧的一列不定义其宽度，任其伸展。但是要注意，如果右侧空的表格中没有内容，则您看不到想要的效果。最简单的方法是加一个1×1像素无内容的透明小图即可。

文章录入：雅虎    责任编辑：雅虎 
  • 上一个文章：

  • 下一个文章：
    • 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    软件产品
    SiteFactory™ 内容管理系统
    SiteFactory™ 网上商店系统
    SiteWeaver™ 内容管理系统
    SiteWeaver™ 网上商店系统
    SiteWeaver™ 企业门户网站系统
    SiteWeaver™ 教育门户网站系统
    SiteWeaver™ 政府门户网站系统
    SiteWeaver™ 行业门户网站系统
    平台产品
    企业服务
    行业解决方案
    联系我们 | 关于动易 | 网站地图 | 相关证书 | 合作伙伴 | 招贤纳士 | 法律条款 | 隐私权声明
    安全上网网上报警
    动易网络科技有限公司版权所有 © 2003- 　粤ICP备05004015号
    公安备案编号：200603D0322　本站基于 PowerEasy® SiteWeaver™ 制作