天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网>新闻>

抽屉式菜单的设计

YESKY2000-12-09 00:00
本文导航
<<返回分页阅读
1
 〔恢来蠹矣忻挥杏霉齃otus 1-2-3,它的界面是在屏幕的顶端有一个工具条,当你点击工具条上的图标时,你就会看见,它的菜单像一个抽屉一样的拉了下来。然后,你再点一下,这个菜单又会像抽屉一样的收了回去。在网页上我们看过很多菜单,但都没有这样效果,就是菜单下拉的一个动态的效果,这对于我们网页的友好界面是很必要的,这里是一个抽屉式菜单的设计。

  我们的这个菜单,分成三个部分,即上中下三个部分,上部为用于展开和收起菜单的部分,中部为菜单的内容部分,底部则为一个菜单的小托盘。我们通过点击菜单的上部,而移动菜单的托盘,交显示菜单的中部,以达到菜单展开的动态效果,我们同样可以通过点击菜单的顶部而让菜单的托盘上移,造成菜单的收起的动态效果。

  这里是这个抽屉式菜单的演示

  下页的部分放在你网页中的$#@60;head$#@62;$#@60;/head$#@62;之间。

$#@60;!-- 你可以通过下面的样式定义来改变元件的样式 --$#@62;

$#@60;style$#@62;

$#@60;!-- 以下是链接的样式 --$#@62;
A{color:blue; text-decoration:none}
A:hover{color:red;text-decoration:underline;}
A:link{text-decoration:none;}

$#@60;!-- 以下是菜单各部分的样式 --$#@62;
$#@60;!-- clTopMenu表示菜单的上部,clTopMenuBottom表示菜单的下部,clTopMenuText表示菜单的中部 --$#@62;

TD{font-family:宋体,helvetica; font-size:9pt}
DIV.clTopMenu{position:absolute; width:97; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; }
DIV.clTopMenuBottom{position:absolute; width:97; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#c0c000; background-color:#c0c000; z-index:2}
DIV.clTopMenuText{position:absolute; width:88; left:5; top:15; font-family:宋体,helvetica; font-size:9pt; z-index:1;layer-background-color:#C8C8FF; background-color:#C8C8FF}
$#@60;/style$#@62;

下面是操纵菜单的程序,也放在$#@60;head$#@62;$#@60;/head$#@62;之间。

$#@60;script$#@62;

ie=document.all?1:0
n=document.layers?1:0

2
/***设置变量***/
var numberOfMenus=2 //这个变量是定义有几个抽屉式? 。(需要在$#@60;body$#@62;$#@60;/body$#@62;中定义不同的菜单定义)

var mwidth=97 //菜单文字的宽度

var pxBetween=10 //两个或多个菜单的间隔(单位:像素)

var fromLeft=20 //第一个菜单的左边边距(单位:像素)

var fromTop=10 //菜单的上边距(单位:像素)

var bgColor="#c0c000" //当鼠标没有移入菜单头时,菜单底的颜色

var bgColorChangeTo="#c0c000"//当鼠标移入菜单头时,菜单底的颜色

var imageHeight=13 //菜单头的高度(单位:像素)

//构造对象,新建一个菜单的对象
function makeNewsMenu(obj,nest){
nest=(!nest) ? "":"document."+nest+"."
this.css=(n) ? eval(nest+"document."+obj):eval("document.all."+obj+".style")
this.scrollHeight=n?this.css.document.height:eval("document.all."+obj+".offsetHeight")
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
  this.obj = obj + "Object"; eval(this.obj + "=this")
}

3
//对像的方法,让这个菜单的对象拥有的方法。
//函数b_moveIt(x,y)是菜单移动的函数。
//函数b_bgChange(color)是改变菜单背景颜色的函数。
//函数b_clipTo是一个调整菜单大小函数
//函数b_slideUp是收起菜单的函数,是一个递归调用的函数
//函数b_slideDown是展开菜单函数,也是一个递归调用的函数
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y$#@62;ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",""+fn+"",""+wh+"")",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y$#@60;ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",""+fn+"",""+wh+"")",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}

//初始化一个菜单,让其初始值为收起状态,并构造该菜单,让其拥有以上的方法。
function newsMenuInit(){
oTopMenu=new Array()
for(i=0;i$#@60;=numberOfMenus-1;i++){
oTopMenu[i]=new Array()
oTopMenu[i][0]=new makeNewsMenu("divTopMenu"+i)
oTopMenu[i][1]=new makeNewsMenu("divTopMenuBottom"+i,"divTopMenu"+i)
oTopMenu[i][2]=new makeNewsMenu("divTopMenuText"+i,"divTopMenu"+i)
oTopMenu[i][1].moveIt(0,imageHeight)
oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
oTopMenu[i][0].css.visibility="visible"
}
}

4
//当点击菜单头后,移动菜单,就像抽屉一样打开或收起菜单,这里有比较复杂的数学计算。
function topMenu(num){
if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,"oTopMenu["+num+"][0].clipTo(0,mwidth,oTopMenu["+num+"][1].y+3,0)","oTopMenu["+num+"][0].clipTo(0,mwidth,oTopMenu["+num+"][1].y+3,0)")
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,"oTopMenu["+num+"][0].clipTo(0,mwidth,oTopMenu["+num+"][1].y+3,0)","oTopMenu["+num+"][0].clipTo(0,mwidth,oTopMenu["+num+"][1].y+3,0)")
}
//当鼠标进入时,改变菜单底部层的背景颜色
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}


//在页面载入的时候初始化菜单
onload=newsMenuInit;
$#@60;/script$#@62;

  下面,我们该在我们的$#@60;body$#@62;$#@60;/body$#@62;之间进行菜单上中下部的定义了,让我们先看一下两个抽屉式菜单的定义。为什么我们要定义两个呢?原因是我们在上面那段Javascripts程序中设置了两个菜单(numberOfMenus=2)

5
$#@60;!-- 第一个菜单定义 --$#@62;
    $#@60;div id="divTopMenu0" class="clTopMenu"$#@62;$#@60;a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false"$#@62;$#@60;img src="clickformenu.gif" width=97 alt="请单击以“展开/收起”菜单" border=0 align="top"$#@62;$#@60;/a$#@62;
$#@60;div id="divTopMenuText0" class="clTopMenuText"$#@62;$#@60;center$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项一";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项一】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项二";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项二】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项三";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项三】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项四";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项四】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项五";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项五】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项六";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项六】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="http://haoel.yeah.net/" target="_blank" ONMOUSEOVER="window.status="耗子网络编程站";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【耗子编程站】$#@60;/a$#@62;$#@60;/center$#@62;
$#@60;/div$#@62;
$#@60;div id="divTopMenuBottom0" class="clTopMenuBottom"$#@62;$#@60;/div$#@62;
    $#@60;/div$#@62;

$#@60;!--第一个菜单定义结束 --$#@62;
6

$#@60;!-- 第二个菜单定义 --$#@62;
    $#@60;div id="divTopMenu1" class="clTopMenu"$#@62;$#@60;a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(ie)this.blur(); return false"$#@62;$#@60;img src="clickformenu.gif" width=97 alt="请单击以“展开/收起”菜单" border=0 align="top"$#@62;$#@60;/a$#@62;
$#@60;div id="divTopMenuText1" class="clTopMenuText"$#@62;$#@60;center$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项七";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项七】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项八";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项八】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项九";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项九】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="#" ONMOUSEOVER="window.status="菜单项十";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【菜单项十】$#@60;/a$#@62;$#@60;br$#@62;
$#@60;a href="http://haoel.yeah.net/" target="_blank" ONMOUSEOVER="window.status="耗子网络编程站";return true;" ONMOUSEOUT="window.status="";return true;" onclick="window.focus()"$#@62;【耗子编程站】$#@60;/a$#@62;$#@60;/center$#@62;
$#@60;/div$#@62;
$#@60;div id="divTopMenuBottom1" class="clTopMenuBottom"$#@62;$#@60;/div$#@62;
    $#@60;/div$#@62;

$#@60;!--第二个菜单定义结束 --$#@62;

  我们不难发现,定义菜单的头部,我们要用id为divTopMenu后加一个数字来定义,这里的数字表示了第几个菜单,第一个菜单项用0,即divTopMenu0,第二个菜单用1,即divTopMenu1,以此类推。菜单的中部和下部也一样,要用ID开头为divTopMenuText和divTopMenuBottom后跟数字的形式来定义了。

另外,我们还可以看见,在定义菜单头部时,的Div标识中有这样一段描述:$#@60;a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(ie)this.blur(); return false"$#@62;其中的onmouseover="menuOver(1)"和onmouseout="menuOut(1)"和onclick="topMenu(1)"中的1表示这两个事件作用在第二个菜单上,如果改成0,则就是在第一个菜单上作用了。读者可以交换一下第一个菜单和第二个菜音来看一下会有什么样不同的结果。
作者:耗子责任编辑:)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
苹果 iPhone 9 Plus
报价
图片
评测
  • 屏幕尺寸:6.1英寸
  • CPU型号:苹果A13
  • 4G制式:移动联通电信全网通(TD-LTE/FDD-LTE)
  • 识别方式:Touch ID
  • 产品特性:全面屏
  • 出品地区:美国
  • 查看更多参数>>查看更多产品>>
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
笔记本手机数码家电