Understanding the HTML5 mechanics of vertical navigation
The 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. This example uses the <aside> tag to set off 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.
<!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;
color:#141919;
}
a:hover {
color:#A69055;
}
.centerNav {
text-align:center;
}
.indentNav {
margin-left:15px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Web Services Galore</title>
</head>
<body>
<img src=”designLogo.png” width=”64” height=”66” align=”left”>
<nav class=”centerNav”> <a href=”#”>Graphic Design</a> | <a href=”#”>Development</a> | <a href=”#”>Interface Design</a> | <a href=”#”>Site Architecture</a></nav>
<header>
<h1> Honorable Web Services</h1>
</header>
<aside>
<nav class=”indentNav”> <a href=”#”>Overview</a><br>
<br>
<a href=”#”>Navigation</a><br>
<br>
<a href=”#”>RSS Subscription</a><br>
<br>
<a href=”#”>Iframes</a><br>
<br>
<a href=”#”>CSS3 Navigation Styles</a><br>
<br>
<a href=”#”>Audience Identification</a><br>
<br>
<a href=”#”>Focus Group Testing</a><br>
<br>
<a href=”#”>Adding Mobile Options</a><br>
<br>
</nav>
</aside>
<section class=”content”>
<header>
<h2>Interface Design</h2>
</header>
Honorable Web Services has full interface design services. You may choose from the following list, selecting just the services you want.
<ul>
<li>Simple text link interfaces</li>
<li>Drop-down menus </li>
<li>Button links</li>
<li>Datalist links</li>
<li>Iframe navigation</li>
<li>Navigation styling</li>
</ul>
Select one of the links on the left to see more information. Also be sure to check out our services in graphic design, development, and architecture in the menu along the top of the page.</section>
</body>
</html>
When you run this program, you can see that
although it provides a wide variety of user choices, it’s clear. The
global navigation along the top provides all the main choices. Then on
each page within a global collection, users are able to select choices
specific to the selected topic. Figure 3 shows what you can expect to
see when you test the program in an HTML5 browser on a computer screen.
Figure 3: Providing horizontal and vertical navigation choices.
When you look at the same page on a mobile device,
the space taken up on the left where the vertical menu has been placed
pushes the content downward. Users have to scroll more. Also notice
that the horizontal menu along the top is pushed in so that it now
takes up two roles. Figure 8-8 shows the results on a mobile browser.
For mobile devices, two-tier horizontal navigation
bars — that do not push content below the viewing area — may better
serve you. As you can see in comparing Figures 3 and 4, the
horizontal navigation bar breaks into two tiers in the mobile device
without taking up much room. However, the vertical navigation bar
pushes into the content area and forces more content (including the
navigation bar itself) below the viewing area.
Figure 4: Vertical and horizontal menus on a mobile device.
Using graphic icons in navigation
In addition to using text to link to other pages,
you also can use graphic files — JPEG, PNG, or GIF. Using graphic
images for linking can help users quickly find what they’re looking
for. For example, a right or left arrow quickly can be identified as
linking to the next or last page. Such images transcend language
differences and help a wider audience base. Likewise, younger children
are more likely to understand certain symbols than they are certain
words.
The format for using images for identifying links is the same as it is for text. However, instead of placing text in an <a> container, you use an image reference. The following code snippet shows the basic format:
<a href=”page2.html”><img src=”arrowRight.jpg”></a>
Users see an arrow icon and click it instead of a
text message. Often, designers will use both text and an image to send
users to another page, as shown in the next snippet:
<a href=”page2.html”><img src=”arrowRight.jpg”>Next Page</a>
Also, some designers create icons with text embedded in the symbol, as shown in Figure 5.
Figure 5: Link image with text.
One advantage designers find in using
graphic text is that they can use any font they want without fear that
the user won’t have that particular font in his system. It also helps
to keep users from getting lost because graphic symbols with text are
easy for the user to spot and understand.
