Prev | Current Page 279 | Next

Craig Grannell

"The Essential Guide to CSS and HTML Web Design"


Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder.
What you??™ll learn How to create a vertically aligned navigation bar, and how to style
it with CSS to create a 3D-like effect for each of the list items.
Completed files The vertical-navigation-bar folder in the chapter 5 folder.
1. Create the list structure. Add the following code block to create the structure of
the navigation bar. By using nested lists, you can provide the navigation bar with a
hierarchical structure (and you can style each level in CSS). In this example, the list
has two levels. (Refer to Chapter 3 for an overview of correctly formatting lists.)
This list is nested within a div with an id value of navigation, which we??™ll later take
advantage of by using contextual selectors. (For this example, dummy href values
of # are being used, but in a live site, always check that your links lead somewhere!)

2.


Pages:
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291