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

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

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

抽屉式菜单的设计

YESKY 2000-12-09 00:00 我要吐槽
 〔恢来蠹矣忻挥杏霉齃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

作者:耗子责任编辑:)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
笔记本手机数码家电