#navigation li li a:hover {
background-color: #aaaaaa;
}
#navigation li li a:active {
padding: 2px 4px 4px 16px;
background-color: #888888;
color: #000000;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
}
The navigation bar is now complete and, as you can see from the following images
(which depict, from left to right, the default, hover, and active states), the buttons
have a tactile feel to them. Should this not be to your liking, it??™s easy to
change the look of the navigation bar because everything??™s styled in CSS. To expand
on this design, you could introduce background images for each state, thereby
making the navigation bar even more graphical. However, because you didn??™t
USING LINKS AND CREATING NAVIGATION
199
5
simply chop up a GIF, you can easily add and remove items from the navigation bar,
just by amending the list created in step 1. Any added items will be styled automatically
by the style sheet rules.
Required files The files from vertical-navigation-bar in the chapter 5 folder.
What you??™ll learn How to take the navigation bar created in the previous exercise
and make its sections collapsible.
Completed files vertical-navigation-bar-collapsible in the chapter 5 folder.
1. Set up the JavaScript. Create a new JavaScript document and attach it to the HTML
file via a script element in the head of the document.
Pages:
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295