3.8. Creating a Link Menu to Other Pages

Problem

You need to create a way for visitors to quickly navigate to the most popular pages on your site.

Solution

Add a JavaScript function that accepts a URL from a form and uses it to load the new web page in the visitor's browser. Add this code to the <head> section of your web pages:

	<script type="text/JavaScript" language="JavaScript">
	<!--
	function goToPage(url) {
	 if (url != '') {
	  window.location = url;

	 }
	}
	//-->
	</script>

The function goToPage( ) takes the parameter url from the selected value in a form menu on the page. After checking to make sure that the value of the parameter is not empty (url != ''), the function assigns the value to the location property of the window object, causing the browser to load the new page.

A select menu (shown in Figure 3-9) gives site visitors a way to choose the page to jump to and invoke the function.

Combined with a simple JavaScript, a select menu gives visitors another way to navigate your site

Figure 3-9. Combined with a simple JavaScript, a select menu gives visitors another way to navigate your site

 <form name="jmenu" method="post"> <select name="jchoices"> <option label="-Jump to another page-" value="" selected>-Jump to another page- </option> <option label="Widgets" value="http://yoursite.com/widgets/">Widgets</option> <option label="Doo-Dads" value=" http://yoursite.com/doodads/">Doo-Dads</option> <option label="Things" value=" http://yoursite.com/things/">Things</option> </select> <input ...

Get Web Site Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial