Add a style sheet. Create and save the style sheet document javascriptoverrides.
css, and add the following rule to initially hide any lists with the
collapsibleList class value in JavaScript-enabled browsers.
#navigation ul.collapsibleList {
display: none;
}
The following images show the results (which depict, from left to right, the
default, hover, and active states).
Note that if you wanted to toggle different kinds of elements on your page, the two
scripts shown so far in this chapter would clash. Therefore, you would need to create
two different functions, with different names; for example, you could change all
instances of toggle(toggler) in this exercise to toggleNav(toggler).
USING LINKS AND CREATING NAVIGATION
201
5
Working with inline lists
By default, list items are displayed in a vertical fashion, one under the other. However, this
behavior can be overridden in CSS, enabling you to create inline lists. This is handy for
website navigation, since many navigation bars are horizontally oriented. Some designers
mark up horizontal navigation up by using strings of links separated by vertical bars or
spaces:
A link |
A link |
??
A linkHowever, a horizontal navigation bar is still a list of links, and so semantically should be
marked up in the same way as the vertical navigation bar in the previous exercise. In this
section, you??™ll find out how to work with inline lists, discovering how to create breadcrumb
navigation, CSS-only ???tabbed??? navigation, and various graphical navigation bars, complete
with rollover effects??”all without relying on JavaScript.
Pages:
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297