programming4us
programming4us
WEBSITE

Smashing Html5 : Navigation Strategies - Using JavaScript to Call a Linked Page

- 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

Any global navigation system needs a way to call different Web pages and the drop-down menus need a way to call a selected item. Up to this point, the <a> tag has done a good job of taking care of links, but you probably noticed the drop-down menus have no links. The <select> tag needs to work with the form element and a JavaScript function. On the HTML5 side, the following snippet shows the essentials:

<form name=”menuNow”>

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

<select id=”animals” name=”global1” onChange=”optionMenu()”>

<option value=”animals/horses.html”>Horses</option>

<option value=”animals/dogs.html”>Dogs</option>

The names of the form and select elements are important because JavaScript uses the names as a path to the selected option. (If you’re familiar with arrays, the options are all treated as array elements.)

The JavaScript is placed in a separate file because if you’re going to be using it with a global navigation system, you don’t want to have to rewrite it with every page. The following JavaScript should be saved in a text file named globMenu.js.

function optionMenu()

{

var choice = document.menuNow.global1.selectedIndex;

var urlNow = document.menuNow.global1.options[choice].value;

window.location.href = urlNow;

}

What that reflects is the HTML5 Document Object Model (DOM). The document is the Web page, menuNow is the name of the form element, global1 is the name of the select element, and selectedIndex is the selected option. Because the selectedIndex is a number between 0 and the number of options in the <select> tag container, it can be used to choose the array element (option), which is selected. Whatever value is stored in the option is passed to the variable named urlNow. For example, the following line has a relative URL of animals/dogs.html:

<option value=”animals/dogs.html”>Dogs</option>

The final line in the JavaScript, window.location.href = urlNow, has the same function as the following HTML5 line:

<a href=”animals/dogs.html”>

In this context, a different JavaScript function would have to be written for each <select> tag because the function uses a specific reference to that tag (global1). More sophisticated JavaScript could be developed to use variables for the different element names, but the function employed here is relatively short and easier to implement.

To test this out yourself, create simple Web pages with the following names:

horses.html

dogs.html

cats.html

rabbits.html

raccoons.html

The Web pages can just have names on them — nothing fancy. 

<!DOCTYPE HTML>

<html>

<head>

<script type=”text/javascript” src=”globMenu.js” />

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

<title>Drop-Down Menu</title>

</head>

<body>

<article>

<header>

<nav>

<form name=”menuNow”>

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

<select id=”animals” name=”global1” onChange=”optionMenu()”>

<option value=”animals/horses.html”>Horses</option>

<option value=”animals/dogs.html”>Dogs</option>

<option value=”animals/cats.html”>Cats</option>

<option value=”animals/rabbits.html”>Rabbits</option>

<option value=”animals/raccoons.html”>Raccoons</option>

</select>

<label for=”vegetables”>Vegetables</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</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>

</form>

</nav>

</header>

</article>

</body>

</html>

Test the page using with Google Chrome or Opera — at the time of this writing, those were the only two browsers that had implemented this aspect of HTML5.

Other  
  •  Smashing Html5 : Web Navigation Concepts (part 2) - Using lists in global navigation
  •  Smashing Html5 : Web Navigation Concepts (part 1) - Designer navigation and user navigation, Global navigation
  •  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
  •  
    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
    Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
    programming4us
     
     
    programming4us