Let's build a familiar interface element - the dropdown, hierarchical menu, much like the ones that are probably at the top of the program you are using to read this right now. Most operating systems have a generic widget that you call when you want the dropdown to work. Then you give it the name of the selection and the action it performs once it is selected.
Since HTML does not contain this widget, you will have to build your own. To do so, you first have to describe how this is going to look. We have a bar shaded to a certain color, with some text contained therein that describes the function, such as file, edit, view, etc. When you click on the bit of text, a rectangle appears that covers over other parts of the document or application. Within that rectangle there is a list, and if you click on an item in that list, you cause an action to happen in your program. So let's build such a menu with HTML.
The first part would be to create a DIV to act as the top bar:
<div id="menuBar"> </div>
Then you take it, stretch it across the top, and color it some monkey color:
<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;
}
</style>
This would produce a DIV that looks like this.
[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser.]
Now if you are CSS purist, and I know some of you are, you are probably scratching your head at that last property, vainly calling up the CSS spec and searching through it. Well, stop looking, it's not in the spec. It's a Netscape extension to CSS that translates into the background color of an absolutely positioned element. It's necessary (in conjunction with the border: 1px solid #99ffff;) to get the background color to expand to the border of the DIV. Otherwise the background collapses around the contents of the DIV. So the choice is to either use a spacer GIF or use this proprietary tag.
next page»
