Chapter 4: More Dynamic Drop-Down Menus and the Incredible, Versatile :Target

Overview

Chapter 3 might have made it sound impossible to create dynamic drop-down menus using only CSS and XHTML, at least if you want to use only a click to open a menu. Although the points made were true, there is an approach using only CSS that allows a user to click to open a menu. That approach, which I focus on in this chapter, is useful for a number of things, from creating drop-down menus to custom pop-up dialogs.

I decided not to go into this approach in Chapter 3 because it does have some limitations, albeit limitations that are not impossible to work around. I also decided to focus on this approach in a chapter all its own, because it is possible to do more than merely create drop-down menus. The technique presented here can also be used to create other stylistic changes when a user clicks on something within a web document. For instance, it can be used to show a custom pop-up dialog, or to create tab-based navigation where the content of every tab exists within the same document instead of in separate documents, as demonstrated in Chapter 1.

The great benefit of this approach is that it conforms to the accessibility requirements presented in Chapter 3; that is, the document remains accessible from the keyboard, and all with very little or no JavaScript required. You also get an idea of how this technique works for the project in Chapter 5, which further explores the possibilities of using :target in a web project.

The most compelling benefit of this approach is that it removes the need for complex JavaScript. I do not feel that using JavaScript is a bad thing, or that JavaScript should be avoided — in fact quite the contrary, JavaScript makes rich, interactive applications possible. However, I believe that a web designer should take the easiest, most intuitive, most efficient route possible, while preserving accessibility. This approach, when compared to the JavaScript I prepared for Chapter 3, wins hands down for simplicity and superior accessibility. The next section elaborates on the components used in the design of this project and discusses this in more detail.