Dropdown Menus
Dropdown menus have been around for a while. Until recently I haven't had the incentive to learn how to make them as I have been relying heavily on CMSs for running my web sites (Word Press and Mediawiki). Since taking on the duties of the KAG E-Corps Commander, I have decided it is high time that I learn.
There are a number of good sites that are leveraging this menu technique, including the KAG Quartermasters site. There are a several ways to implement dropdown menus, most sites using a horizontal dropdown menu, while others, including the E-Corps site (and, currently, Amazon) use a vertical dropdown (or "dropright") menu. You can also incorporate using graphic buttons in the design for the top-level item of each menu category, again, as the KAGQM uses.
The next question is "how to make them?" After doing some research in the library at work, a handy place to start, I found what I was looking for in a book on Cascading Style Sheets. Although the book did not go in to how to implement dropdown menus, it did refer me to a web site with an article on how to best set up dropdown menus and be browser independent using Son of Suckerfish. The article provides information on doing one, two, and three level dropdown menus, as well as how to implement using the vertical system as is being used here on the E-Corps site. All the code necessary to implement dropdown menus is provided in the article, so I will not replicate it here.
The key to dropdown menus is a combination of Cascading Style Sheets, an unordered list in html, and a bit of JavaScript to make it all work on Internet Explorer. The JavaScript is necessary as the technique relies on the use of the "hover" pseudo class.
In the CSS you can change the various color attributes to suit your web site look and feel.
If your site has more than a few pages, using dropdown menus will help you to organize your content and make it more accessible to visitors to your site.
