Its markup and CSS are relatively short and straightforward,
it illustrates how to organize nested elements with very tight tolerances,
and you end up with a compact and useful element.
Let??™s now take a look a lists and menus.
smaller font-size for links
removes bullets off list
shows paragraph when error class
is added
smaller font size
unhovered link color
hovered link color
removes link underline when
rolled
end styles for the messages/errors
list
DESIGNING INTERFACE COMPONENTS 205
Styling Lists and Menus
A list is simply a group of related text items: the names of some
related objects or the steps in a process, for example. Lists can simply
be a series of items that are displayed together, or can also be
links that enable the user to navigate to other locations in your site.
A menu is a list that offers navigation choices??”the text can be
clicked. In this section, we??™ll ?¬? rst create a list, then turn it into a
clickable menu. Finally, we??™ll create a multi-level menu with a top
level of choices that reveals subchoices when a top-level choice is
hovered. Let??™s start by looking at lists.
Lists
There are three types of lists: unordered, ordered, and de?¬? nition
lists. They have similar markup but should be used based on their
content.
??? Unordered lists are bulleted by default. You can change this
bullet to a hollow circle or a square, or you can even replace the
bullet with a graphic or an entity such as ~ (tilde).
Pages:
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244