NAVIGATION STRATEGIES - HTML5 - page 158

ef ect is likely to be helpful. For example, making the font larger when the mouse is over it was
an idea taken from the Macintosh dock where icons enlarge when the mouse passes over
them. However, you might want to ask whether turning the link another color and changing
the text decoration is a good idea for a visited class. Does it really help the user? Also, try it on
dif erent browsers and see if the results are consistent. Remember that just because you can
change a link's appearance doesn't mean you have to.

UNDERSTANDING THE HTML5 MECHANICS OF VERTICAL NAVIGATION
h e most important part of creating a vertical section to use for navigation in your site is
sectioning a portion of the page where you can place the links. h is example uses the
<aside> tag to set of the vertical navigation. However, because it's navigation, the <nav>
tag is used as well so that any JavaScript references to the Document Object Model (DOM)
can recognize the section as one used for navigation. h e following listing ( VertHor.html
in this chapter's folder at www.wiley.com/go/smashinghtml5 ) shows how.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/*141919,2D2B21,A69055,C9B086,FFB88C --Japanese Art*/
body {
font - family : ”Trebuchet MS” , Arial , Helvetica , sans - serif ;
color : #2D2B21;
background - color : #C9B086;
font - size : 12px ;
}
. content {
display : table - cell ;
width : 600px ;
padding : 15px ;
}
aside {
display : table - cell ;
width : 100px ;
background - color : #FFB88C;
padding - right : 5px ;
}
h1 {
font - family : Papyrus ;
color : #2D2B21;
text - align : center ;
}
h2 {
color : #A69055;
}
a {
font - family : Verdana , Geneva , sans - serif ;
font - size : 10px ;
text - decoration : none ;

162