An HTML 5 Navigation Screen
Like many people today, we are exploring HTML 5 for use in web applications. While not really ready for prime-time on its own at this point, it can definitely be used in combination with tools like Modernizr (www.Modernizr.com). One of the first things you might do is create a home page with a simple navigation system on it. This blog post will show you one way to accomplish this.
Navigation
Figure 1 shows an example of a home screen and a navigation system. One of the things you notice right away about this home screen in Figure 1 is the drop shadows around each navigation button. You also notice that each button has a rounded corner. All the buttons together sit atop a background that also has a drop shadow and also has a rounded corner. Further, each of these elements also has a gradient color of light gray to gray.
While there were ways to accomplish drop shadows, rounded corners and gradients prior to CSS 3 and HTML 5, it was not always easy for developers to do so. You typically needed help from a graphical artist to create these. These graphical elements are a part of CSS 3 and can be created by a developer with a little help from some on-line tools such as ColorZilla which I will talk about in the next section.
Figure 1: A navigation system in HTML 5 can be surrounded with <nav> tags.
Listing 1 shows the complete HTML for the navigation screen shown in Figure 1. As you can see the HTML is fairly simple. The new items in this HTML are the box-shadow, and the border-radius rules in the .mainMenu style selector, and the <nav> and <footer> elements in the main body of the HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Business UI Samples</title>
<link rel="stylesheet"
type="text/css"
href="Styles/Styles.css" />
<style type="text/css">
.mainMenu
{
color: White;
float: none;
text-decoration: none;
display: inline-block;
text-align: center;
height: 0.5em;
width: 5em;
margin: 0.5em 0.5em 0.5em 0.5em;
padding: 0.3em 1em 1.1em 1em;
border: 0.09em solid black;
box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
-webkit-box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
-moz-box-shadow: 0.5em 0.5em rgba(0,0,0,0.8);
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
}
p
{
margin-left: 1em;
}
</style>
</head>
<body>
<nav class="backColor">
<a href="Login.htm" class="mainMenu backColor">Login</a>
<a href="ContactUs.htm"
class="mainMenu backColor">Contact</a>
<a href="Name.htm" class="mainMenu backColor">Name</a>
<a href="Address.htm"
class="mainMenu backColor">Address</a>
<a href="User.htm" class="mainMenu backColor">User</a>
</nav>
<br />
<br />
<br />
<p>
Content goes in here...</p>
<footer class="backColor">
Samples of Business UI
</footer>
</body>
</html>
Listing 1: The HTML for the default page of your web application.
The <nav> element is nothing more than a semantic markup used to group links together to make up your main navigation area. Having a separate element allows us to use an element selector in CSS to provide styling for <nav>. In addition, <nav> allows search engines to determine that this is your main navigation area.
The CSS rules “box-shadow” and “border-radius” used in the .mainMenu style are what provide the rounded corners of your main navigation area and footer area. The three different versions of box-shadow and border-radius help you account for the syntax differences between browsers. I have tested these styles with these browsers; Opera 11.61, Google Chrome 17.0, Safari 5.12, FireFox 9.01, and IE 9. While the screens in this article may look slightly different on each one, they all seem to work with HTML 5 and CSS 3. If the particular browser does not support a specific feature of HTML 5 or CSS 3 then they simply downgrade to something that is similar in HTML 4.
The other thing you may notice from the navigation screen shown in Figure 1 is the navigation background and the hyperlinks have a slight gradient color to them. In other words, they are not just one color of gray, but they start with a light gray at the top and gradually become a darker gray at the bottom. To accomplish this you add a class attribute to the <nav> button called “backColor”. This class style is defined in the style sheet named “Styles.css”. Listing 2 shows the complete definition of this “backColor” style. Now don’t let the size of this listing scare you. This was code generated from a great website called ColorZilla (http://www.colorzilla.com/). This free, on-line utility will generate the correct CSS styles needed to create gradients on each browser.
.backColor
{
/* Old browsers */
background: rgb(181,189,200);
/* IE9 SVG, needs conditional override of
'filter' to 'none' */
background: url(data:image/svg+xml;base64, PD94bWwgdm …);
/* FF3.6+ */
background: -moz-linear-gradient(top,
rgba(181,189,200,1) 0%,
rgba(130,140,149,1) 36%,
rgba(40,52,59,1) 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(181,189,200,1)),
color-stop(36%, rgba(130,140,149,1)),
color-stop(100%, rgba(40,52,59,1)));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top,
rgba(181,189,200,1) 0%,
rgba(130,140,149,1) 36%,
rgba(40,52,59,1) 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top,
rgba(181,189,200,1) 0%,
rgba(130,140,149,1) 36%,
rgba(40,52,59,1) 100%);
/* IE10+ */
background: -ms-linear-gradient(top,
rgba(181,189,200,1) 0%,
rgba(130,140,149,1) 36%,
rgba(40,52,59,1) 100%);
/* W3C */
background: linear-gradient(top,
rgba(181,189,200,1) 0%,
rgba(130,140,149,1) 36%,
rgba(40,52,59,1) 100%);
/* IE6-8 */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#b5bdc8',
endColorstr='#28343b',
GradientType=0 );
}
Listing 2: Gradients are a great way to make your screens look more natural to users.
The last new item on the home page is the <footer> element. Again, this is just a semantic markup element. You style <footer> exactly as you style the <nav> element. You will use the same class attribute, backColor, on this <footer> element. This adds the background color to the footer. Also, in the Styles.css you will find the footer selector defined like the following:
footer
{
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0.5em 0.5em 0.5em 0.5em;
position: absolute;
bottom: 0.2em;
left: 0em;
width: 95%;
text-align: left;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
}
The above rules are applied to the <footer> element and the backColor class is also applied with the background color. Keeping your background color separate from your other style rules allows you to change the background color in just one place without affecting any other style rules. You also see this type of styling on the <a href> elements used for the main navigation.
<a href="Login.htm" class="mainMenu backColor">Login</a>
In the class attribute on each of the <a href> elements you are applying two styles. The mainMenu selector controls foreground color, margin, padding and other rules while the backColor selector applies the background color.
Summary
In this blog post you learned to create a simple home page using the <nav> and <footer> elements in HTML 5. You also learned to use rounded borders and drop shadows will make your screens look more modern. Employing linear gradients in your background colors will help your applications look more natural to new users. Of course, all of this assumes that HTML 5 can be rendered on all browsers that your users use. Right now, this is just not the case. So, you will need to still use some fallback mechanisms such as Modernizr (www.modernizr.com) to ensure that your HTML 5 applications will still work with older browsers.
NOTE: You can download the sample code for this article by visiting my website at http://www.pdsa.com/downloads. Select “Tips & Tricks”, then select “HTML 5 Navigation” from the drop down list.
Past Blog Content
Blog Archive
-
2015
-
2014 (18)
-
2013 (11)
-
2012 (19)
-
2011 (29)
-
2010 (19)
-
2009 (28)
-
2008 (0)
-
2007 (14)
-
2006 (6)