Updated: 03/13/2004 10:39:04 AM               (Broken Link? Report It Here)      

Navigation Area

What is the purpose of the Navigation Hints and Tips area?

Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn.

That's the purpose of the Navigation Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Form Tricks

Navigation Tidbits CSS Tricks HTML Tricks JavaScript Tricks

Form Based Jump Navigation

To save space and list your webpage links in a different way, consider using a form-based, drop-down jump navigation system. This is a neat and practical navigation method if you have many sections in your website and multiple pages in each section.

Normally, a website has a series of links for each of its pages and more links underneath for all of the subpages. Using this Jump script, you could simply name the various sections and place a form selector below each to show all the sub-pages without taking all that space to show them.

<Script Language="JavaScript">
<!-- Hide from old browsers
function NavJump(list){location.href =
list.options[list.selectedIndex].value }
// end hiding --->
</script>
<form>
<Select>
<OPTION SELECTED VALUE="gg-main.htm">Home Page
<OPTION VALUE="gg-navigate.htm">Navigation
<OPTION VALUE="gg-nav-hints.htm">Nav Hints
</SELECT>
<INPUT TYPE="button" VALUE="Jump"
onClick="NavJump(this.form.elements[0])">
</FORM>

Copy the code above and try it out by replacing the coded values with your own links. All you need to change are the entries in the form itself (highlighted in blue). The script is generic and doesn't need to be altered. Add as many links as you want without ever taking more space from your page. Please note the first option box has the word "SELECTED" inside. This is how you choose which entry should be the default display.

Using Forms for Navigation

Here is another version of a navigation form you can use. This version does not require a "Jump" button. Instead the visitor clicks on the arrow and the selection list drops. Then the visitor clicks on the selection and the visitor is hyperlinked to the destination page.

The JavaScript code for this form is below. To use it, follow the instructions listed here:

1. Change the link destination (value=" ") in the options

2. Add more <option></option> lines to get more links

3. Change the name of the link

4. Copy the entire form code to your clipboard

5. Paste the code into your html page wherever you want this navigation form to be located.

6. Ensure that the second line of the code below is continuous without breaks.

<form name="navigation">
<select name="link" onChange="location=document.navigation.link.options[document.navigation.link.selectedIndex].value;" value="GO">
<option selected>Choose a Link</option>
<option value="http://www.giz-net.com/gizgears/gg-main.htm">Giz-Net's Giz Gears</option>
<option value="http://www.giz-net.com/gizgears/gg-navigate.htm">Giz-Net's Giz Gears: Navigation</option>
</select>
</form>

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.