|
Dropdown Menus Made Easy
By Stephen Bucaro
All the example code I’ve seen that demonstrates how to create dropdown menus is bloated
with unnecessary complexity. Maybe the authors are trying to show off their proficiency
in programming. They make it very difficult to modify the example for your own use.
This article provides close to the minimal code for a dropdown menu. The code creates
a menu bar with two main menu items, each generate a dropdown menu with two menu items.
This example uses Cascading Style Sheets (CSS) and Dynamic HTML (DHTML). Don't worry,
I give you the code to paste into your webpage along with details on how to modify it
for your own requirements.
Below is a style block that you need to paste into the <head> section of your webpage.
<style type="text/css">
.main
{
position:absolute; width:100; height:25;
font-family:Arial;
font-size:14;
font-weight:bold;
color:blue;
text-decoration:none;
background-color:#ccccff;
border-style: solid;
border-width: 2;
border-color: blue;
padding: 5;
display:block;
z-index:1;
}
.drop
{
position:absolute; width:100;
font-family:Arial;
font-size:14;
font-weight:nornal;
color:blue;
text-decoration:none;
background-color:#ccccff;
border-style: solid;
border-width: 2;
border-color: blue;
padding: 5;
display:none;
z-index:2;
}
.droptext
{
font-family:Arial;
font-size:14;
color:blue;
text-decoration:none;
}
.droptext:hover
{
color:purple;
text-decoration:underline;
}
</style>
This block of style code defines four classes. The class main applies to your main
menu bar. As you can see most of the style definitions in the class are self explanatory.
After you get the example working you can go in and edit, for example, the font family,
the font size, the color, and so on.
One important thing I need to mention is the position definition. You can control
the size of your menu bar by editing the width and height numbers in the
main class.
The menu bar's background color is specified in hexadecimal notation. The color defined
here is light blue. Hexadecimal notation is used quite frequently on the web to specify
colors. If you are not familiar with hexadecimal color definitions, it would be to your
advantage to learn about it.
| 
Free Downloads
RSS Feed