Open Toolbar
关闭导航栏
您现在的位置: 全景之家 >> 动易教程 >> 动易教程 >> 正文

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

作者:雅虎    文章来源:动易网络    点击数:    更新时间:2006-10-18      ★★★

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

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

准备工作

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

 

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

以下是风格定义代码:
〈style type="text/css"〉
〈!--
.menu_bottom1
{
width:77px;height:29px;background:url(/Skin/200508/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〉中,也可以将这些定义放在系统的风格模板中进行调用。做好这些准备后,就可以开始制作下面的移动菜单效果了。

第一个移动菜单效果

  将鼠标移动到各个按钮上,看下移动菜单的效果:

“测试按钮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='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="/Skin/200508/bgt.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="/Skin/200508/bgt.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中则要定义不同的对象,如:

以下是第二个JS代码定义,注意红色处的定义,要与前一个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="/Skin/200508/bgt.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="/Skin/200508/bgt.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="/Skin/200508/bgt.gif" width="1" height="1"〉〈/td〉
〈/tr〉
〈/table〉

第二个效果按钮表格定义:
〈table width="100%" border="0" cellpadding="0" cellspacing="0"〉
〈tr align="center"〉
〈td width="*"〉〈img src="/Skin/200508/bgt.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="/Skin/200508/bgt.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="/Skin/200508/bgt.gif" width="1" height="1"〉〈/td〉
〈/tr〉
〈/table〉

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

文章录入:lc637    责任编辑:rogers 

推荐图文

· 动易2006 SP6 正式版倾情发布[提供下载商
· 动易2006版在SQL2005下的安装方法
· 如何去掉动易后台的版权信息?
· 如何实现动易官方网站内容页的移动菜单效

| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站地图 | 在线投稿 |