Beyond Fusion
Follow us on Twitter
 
bug-grn
tutorial

Combo box Navigation - Make your own Go Menu

Tested and Works with:

This tutorial teaches you how to use JavaScript to add navigation to a combo box form.  Similar in function to the Fusion Go Menu component, but customizable.

Tutorial and code by: Chuck Joslin

Internet Explorer FireFox Safari
Chrome Opera

You are using:

Working Example

Combo Box Navigation

Overview: In this tutorial, we'll use a Layout Region as a form. A table cell would work as well. To this, we'll add a Combo Box and a form Button and some code, using several of the many code insertion points in objects in Page Design View.

The code we'll add is Javascript


Step 1.
Place a small Layout Region on your page. Use F3 to access its properties. Check the check box labeled "Form". Now click on the Form label of the Layout Region and change the default name to "combonav". (this can be whatever you want, but be aware this name is used in the Javascript that follows).

Step 2. Using the Fusion form tools, place a combo box and a form button. These can be arranged however you wish. Add a label using a text box if you desire as in the working example above.

Step 3. Select the Combo Box and click on F3 to access its properties. Change the default name to "navselect". Once again, you can use any name, but it will used in the Javascript you'll be adding.

Step 4. Click on the HTML button in the Combo Box property page.

             On the Inside Tag tab enter the following: onChange="gotourl()"

On the After Tag tab enter the following code:

<script language="javascript">
<!--
  function gotourl()
  {
    location=document.combonav.navselect.options[document.combonav.navselect.selectedIndex].value
  }
//-->
</script>


Note: Notice the use of the form name (combonav) and the Combo Box name (navselect) in the code above.

Step 5. Select the form button you added and press F3 to access its properties. Name the button "goto", change the Type to "Button" and the Value to whatever you want the visitor to see in the Button. "Go!" is used in the example.

             Click on the HTML button in the Form Button property page.

             On the Inside Tag tab enter the following: onClick="gotourl()"

Step 6. Now go back to the Combo Box properties and add your select values. The Name is what the visitor sees in the combo box. The Value should be a full URL to the destination page. Or simply a page name if the page is in the same folder as the page you're placing the combo box navigation form on.

Wrapping it up:  This is a relatively simple alternative to the Fusion Go Menu. It you wish, the form button can be omitted.  If you use one and want the default value in the Combo Box to be a label with no value, give it a value of the name of the page it's on. If you don't do so and the visitor leaves the label in view and clicks on the button, you may get a server error.

©2004-2017

Buy AllWebMenus

Works with Fusion 2015

NetObjects Fusion is Registered Trademark of NetObjects, Inc.

Adobe 

Once You Know, You Newegg 

mariadb-badge-88x31