programming4us
programming4us
WEBSITE

Smashing Html5 : Web Navigation Concepts (part 2) - Using lists in global navigation

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
2/16/2015 2:49:47 AM

Using lists in global navigation

One way to approach global navigation is to use lists. 

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

/* 3C514C,98AB98,D3DFD3,A6A47D,8C1616 */

body {

color:#3C514C;

background-color:#D3DFD3;

font-family:Verdana, Geneva, sans-serif;

}

h3 {

color:#8C1616;

background-color:#A6A47D

}

a {

color:#8C1616;

font-size:11px;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Global Navigation</title>

</head>

<body>

<nav> <a href=”#”>Animal</a> | <a href=”#”>Vegetable</a> | <a href=”#”>Mineral</a> |

<ul>

<h3>&nbsp;Animals</h3>

<li><a href=”#”>Mammals</a></li>

<li><a href=”#”>Fish</a></li>

<li><a href=”#”>Birds</a></li>

<ul>

<h3>&nbsp;Mammals</h3>

<li><a href=”#”>Dogs</a></li>

<li><a href=”#”>Cats</a></li>

<li><a href=”#”>Other</a></li>

<ul>

<h3>&nbsp;Dogs</h3>

<li><a href=”#”>Golden Retriever</a></li>

<li><a href=”#”>Red Setter</a></li>

<li><a href=”#”>German Shepherd</a></li>

<li><a href=”#”>Greater Swiss Mountain Dog</a></li>

</ul>

</ul>

</ul>

</nav>

</body>

</html>

Just from looking at the code, you may suspect that this kind of navigation system will quickly overwhelm the page. Figure 1 shows what appears even though the possible choices have been drastically cut

977279-fg0801.eps

Figure 1: List navigation.

With a large enough screen and abbreviated choices such as those used in the example, it may be possible to have a navigation system using the <ul> tags. However, with the list system of navigation on mobile devices, the best advice is, “Don’t even think about it!” Figure 2 shows how the navigation takes up the entire window in a mobile device.

Clearly, as you can see in Figure 2, some other system of navigation is required so that the topic can be viewed.

977279-fg0802.eps

Figure 2: List navigation crowds the display area on a mobile device.

Drop-down menus and global navigation

An alternative approach to global navigation using text links is to use elements that can provide more information in a smaller place. One such element is the <select> tag. The select element displays the first item in a list of options that can be seen only when the user clicks on the select window that appears. The format is made up of a <select> tag along with an <option> tag nested within the select container. Each option container contains an object that is visible when the drop-down menu opens. The following snippet shows the basic format:

<select id=”animals” name=”global1”>

<option value=”horses”>Horses</option>

<option value=”dogs”>Dogs</option>

...

</select>

This can be a handy way to place all of a site’s links into a small area for use as a global menu. You can nest as many <option> tags inside the <select> container as you want. 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Drop-Down Menu</title>

</head>

<nav>

<label for=”animals”>Animals&nbsp;</label>

<select id=”animals” name=”global1”>

<option value=”horses”>Horses</option>

<option value=”dogs”>Dogs</option>

<option value=”cats”>Cats</option>

<option value=”rabbits”>Rabbits</option>

<option value=”raccons”>Raccoons</option>

</select>

<label for=”vegetables”>Vegetables&nbsp;</label>

<select id=”vegetables” name=”global2”>

<option value=”carrots”>Carrots</option>

<option value=”squash”>Squash</option>

<option value=”peas”>Peas</option>

<option value=”rice”>Rice</option>

<option value=”potatoes”>Potatoes</option>

</select>

<label for=”minerals”>Minerals&nbsp;</label>

<select id=”minerals” name=”global3”>

<option value=”tin”>Tin</option>

<option value=”gold”>Gold</option>

<option value=”copper”>Copper</option>

<option value=”iron”>Iron</option>

<option value=”mercury”>Mercury</option>

</select>

</nav>

<body>

</body>

</html>

With that many HTML5 tags, you might expect a much larger Web page. However, as Figure 3 shows, very little space is taken up.

The HTML5 code has no CSS3 to format the text, and as you can see, the default body font is a serif font and the default menu font is sans-serif. When you use CSS3 for styling, work with the <select> tag for style instead of the <option> tag. If you style the option element, you can style the font family with good results, but other styling is unpredictable between different browsers.

977279-fg0803.eps

Figure 3: Displaying menu choices with the <select> tag.

If the categories appear a bit shallow, you can add greater detail in an outline format using the <optgroup> tag. With each tag, a new subgroup is added. You can nest them in several levels if you wish. 

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

select {

background-color:#F2EFBD;

color:#657BA6;

font-family: Verdana, Geneva, sans-serif;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Stratified Drop-Down Menu</title>

</head>

<nav>

<label for=”animals”>Animals</label>

<select id=”animals” name=”global1”>

<optgroup label=”Dogs”>

<option value=”hounds”>Hounds</option>

<option value=”work”>Work</option>

<option value=”terrier”>Terriers</option>

</optgroup>

<optgroup label=”Horses”>

<option value=”race”>Race</option>

<option value=”work”>Work</option>

<option value=”show”>Show</option>

</optgroup>

<optgroup label=”Rabbits”>

<option value=”pets”>Pets</option>

<option value=”pests”>Pests</option>

<option value=”easter”>Easter</option>

</optgroup>

</select>

</nav>

<body>

</body>

</html>

For some reason, different browsers have different displays of the category headings generated by the optgroup element. Figure 4 shows how the same menu looks on different browsers.

977279-fg0804.eps

Figure 4: Using the <optgroup> tag.

Of the four browsers tested, Firefox stands out as unique. The optgroup headings are italicized and the color combinations are preserved when the menu opens. The other browsers display the correct color scheme only when the menu is closed. (Will this give designers another challenge? Yes!)

Other  
  •  Sharepoint 2013 : The Managed Metadata Service (part 4) - Term Sets
  •  Sharepoint 2013 : The Managed Metadata Service (part 3) - Term Store, Groups
  •  Sharepoint 2013 : The Managed Metadata Service (part 2) - Associating with a Web Application
  •  Sharepoint 2013 : The Managed Metadata Service (part 1) - Taxonomy and Folksonomy, Initial Setup
  •  Sharepoint 2013 : Publishing and Web Content Management - Content Deployment - Configuring the Destination Farm, Configuring the Source Farm
  •  Smashing Html5 : Organizing a Page - Organizing Files - Relative reference
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 2) - Grouping without fracturing, Figures and captions
  •  Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 1) - Paragraphs, divisions, and lists
  •  Smashing Html5 : Organizing a Page - A Design in Sections
  •  Smashing Html5 : The Top of the HTML5 Document
  •  
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    REVIEW
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us
    programming4us
     
     
    programming4us