Example #2

DropBar Example #2

This example removes gradient fills in favor of solid colors. We've also changed the animation speed to 'Fast' and aligned the button-text to the left.

This example also shows that DropBar will automatically adjust the location of the second-level items according to the width of the applet. Although the row of items should start immediately below the label they belong to, you can see that the items belonging to the 'Text' and 'Image' buttons have moved to the left.

The 'Utilities' and 'Text' labels have been set to act as links, as well as containing items.

Finally, we've set the Transparent parameter to 'Yes', and forced DropBar's second-level bar to drop over the HTML content. This transparency works in most modern browsers (see Applet Compatibility) and requires the WMODE parameter to be set to 'transparent'. As you can see by viewing the source of this page, all that's left to do is to place the applet code inside a <div> tag and use CSS to assign a higher z-index than the surrounding content, and move the content below upwards: