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

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


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

准备工作

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

　

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

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


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

第一个移动菜单效果

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


　　下面是上面您所看到效果的代码内容，其中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='ShowTabs2(0)'><a href="#">测试按钮1</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs2(1)'><a href="#">测试按钮2</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs2(2)'><a href="#">测试按钮3</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs2(3)'><a href="#">测试按钮4</a></td>
<td class='menu_bottom1' id='TabTitle' onmouseover='ShowTabs2(4)'><a href="#">测试按钮5</a></td>
<td width="*"><img src="/Lectures/UploadFiles_3793/200612/20061229120537129.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 测试按钮2 测试按钮3 测试按钮4 测试按钮5
“测试按钮1”中要显示的内容
“测试按钮2”中要显示的内容
“测试按钮3”中要显示的内容
“测试按钮4”中要显示的内容
“测试按钮5”中要显示的内容


　　下面是上面您所看到效果的代码内容，其中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="/Lectures/UploadFiles_3793/200612/20061229120537129.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 测试按钮2 测试按钮3 测试按钮4 测试按钮5  
“测试按钮1”中要显示的内容
“测试按钮2”中要显示的内容
“测试按钮3”中要显示的内容
“测试按钮4”中要显示的内容
“测试按钮5”中要显示的内容

　　看到效果了吗？现在是点击了才显示相应的内容。这就类似动易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="/Lectures/UploadFiles_3793/200612/20061229120537129.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="/Lectures/UploadFiles_3793/200612/20061229120537129.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="/Lectures/UploadFiles_3793/200612/20061229120537129.gif" width="1" height="1"></td>
</tr>
</table>

第二个效果按钮表格定义：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="*"><img src="/Lectures/UploadFiles_3793/200612/20061229120537129.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="/Lectures/UploadFiles_3793/200612/20061229120537129.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="/Lectures/UploadFiles_3793/200612/20061229120537129.gif" width="1" height="1"></td>
</tr>
</table>


　　将空列表放在不同的位置则显示不同的效果。如第一个效果按钮表格定义中，我们要在右侧显示空的距离，一般左侧的各列都要定义其宽度，最右侧的一列不定义其宽度，任其伸展。但是要注意，如果右侧空的表格中没有内容，则您看不到想要的效果。最简单的方法是加一个1×1像素无内容的透明小图即可。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Bany/p/1755514.html