下面我们插入一个菜单目录。我们将标题设置为
"Webmonkey" 。
<style type="text/css"> #menuBar {position: absolute; left: 0; top: 0; width: 100%; height: 22px; border: 1px solid #99ffff; background-color: #99ffff; layer-background-color: #99ffff; } .daMenu {position: absolute; width: 100px; height: 22px; border: 1px solid #99ffff; top: 0px } </style> ... <div id="menuBar"> </div> <div id="webmonkey" class="daMenu"> Webmonkey </div>
显示结果如下:
Webmonkey
下面在webmonkey菜单项下加入子菜单:
<style> .moreMenu {position: absolute; width: 100px; border: 1px solid red; background-color: red; layer-background-color: red; top: 22px; } </style> ... <div id="moreMonkey" class="moreMenu"> Aaron <br> Captain Cursor <br> Cassandra <br> Chris <br> Courtney <br> Jeff <br> Joanne <br> Jean Pierre <br> Klug <br> Kristin <br> Nadav <br> Taylor <br> Thau <br> Tim <br> Wendy <br> </div>
同其他菜单项结合后显示结果如下:
Webmonkey
Aaron
Captain Cursor
Cassandra
Chris
Courtney
Jeff
Joanne
Jean Pierre
Klug
Kristin
Nadav
Taylor
Thau
Tim
Wendy
下面我们为菜单项设定功能。首先要做的是选择moreMenu
类,并将其隐藏。因为通常情况下,如果你不点击菜单项,
它不会显示子菜单目录。所以,你应该加入下面的代码:
.moreMenu {position: absolute; width: 100px; border: 1px solid red; background-color: red; layer-background-color: red; visibility: hidden; top: 22px; }
现在这个DIV仍然在页面中,但浏览器不将它显示出来。>>
动态HTML教程
第一页 让我们编写一些有用的东西
第二页 下拉菜单脚本
第三页 使菜单初具规模
第四页 完成菜单条的制作
第五页 使菜单具备相应的功能
Copyright © 1994-99 Wired Digital Inc. All rights reserved.