Understanding Layers
| CSS layers or div elements are boxes of content on a Web page. Unlike "flat" elements such as table cells, you can stack layers one atop another and position them anywhere on the screen (see Figure 10.2). In this respect, layers are like the windows on your desktop. Figure 10.2. CSS layers are boxes of content. Unlike table cells, you can stack them and position them freely on the page.
It gets better. With JavaScript, you can do all kinds of things with layers. You can animate them. You can change their size. You can make them draggable. And you can make them disappear and reappear at will, which is how most developers create the popup effect in popup menus. Each popup menu goes in its own layer, as in Figure 10.3. However, instead of making these layers visible, you specify that they should be hidden or invisible by default. The menus are still therethey're in the code, but the visitor can't see them or interact with them. They're like ghosts: invisible, intangible, and unclickable. That's the way they stay, until the visitor mouses over the predefined hotspot, like the link in a nav bar. Then, a JavaScript function kicks in and changes the visibility property of the layer you want to reveal. The hidden layer appears, and you have a popup menu, as in Figure 10.4. Another script to hide the menu when the visitor is finished with it makes the layer disappear again. Figure 10.3. Each popup menu goes in its own layer. To create the popup effect, the layers are hidden or invisible by default. Figure 10.4. Mousing over a nav-bar category makes the corresponding layer appear. |
