| | | 抽屉式菜单的设计 | | 2000-12-09·
·耗子··YESKY
| 1 2 3 4 5 6 下一页 〔恢来蠹矣忻挥杏霉齃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
1 2 3 4 5 6 下一页 | | | 感谢
访问天极网，如果您觉得该文章涉及版权问题，请看这里！
|
|
