DROP DOWN (List box) MENU

For a drop down menu to play songs, Go here!.

Many Page Builder users would like to make a simple drop down menu like one of the two below.

CLICK & GOSELECT & GO

The users clicks on a list item and is automatically sent to the web page selected.

The users clicks on a list item and then has to click on the GO button to go to the web page selected.

Here are the steps you need to do in order to have your own drop down menu:

  1. Launch Page Builder and OPEN the file you want to put the drop down menu in;

  2. COPY (CTRL+C) the one of the codes below (highlight the code first, then CTRL+C);

  3. Select the Page Builder Screen;

  4. Select ADDONS > INTERACTION > FORMS & SCRIPT > HTML CODE;

  5. PASTE (CTRL+V) the code in the Script Properties box. If this doesn't work then PASTE the code into the CLIPBOARD first.

  6. MODIFY the code to use the files you want to be displayed. If the link is to be to one of your files, then just use the file name, e.g. myphotos.html. If the link is to another web page then use the full URL, e.g. http://www.yahoo.com.

    If you need more links that the number shown here, simply copy one of the links and then paste it below the other link and modify the URL to meet your needs.

  7. SAVE the file.

CLICK & GO DROP DOWN MENU CODE SELECT & GO DROP DOWN MENU CODE
<SCRIPT>
function getSelect(s) {
return s.options[s.selectedIndex].value
}
</SCRIPT>


<FORM>
<SELECT NAME="list" SIZE=1 OnChange="location=getSelect(this)">
<OPTION value="#"> Select A Site
<OPTION value="http://www.yahoo.com">Yahoo
<OPTION value="http://www.excite.com">Excite
<OPTION value="helpforms.htm">Form Help
</SELECT>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the script from old browsers --
function surfto(form) {
var myindex=form.dest.selectedIndex
location=form.dest.options[myindex].value;
}
//-->
</SCRIPT>


<FORM NAME="myform">
<SELECT NAME="dest" SIZE=1>
<OPTION SELECTED VALUE="http://www.yahoo.com">Yahoo
<OPTION VALUE="http://www.excite.com">Excite
<OPTION VALUE="helpforms.htm">My Help On Forms
</SELECT>
<INPUT TYPE="BUTTON" VALUE="GO NOW!" onClick="surfto(this.form)">
</FORM>

For more complicated drop down menus, e.g. to be used with Frame Pages, please see My Drop Down Menu Help Page.

NOTE: - The more complicated drop down menus will require you to place code in both the <HEAD> and <BODY> sections of your web page.

COLORED BACKGROUND FOR DOWN DOWN MENU

To Have a colored background for your drop down menu, like the menu at the top left, the you will had this code to the code above, i.e. just copy and paste one of the codes above using the ADDONS > FORMS & SCRIPT > HTML CODE and then copy and paste this code in the same HTML CODE box either before the other code or after it.


<style type="text/css">
  SELECT {
  FONT-SIZE:SS;
  BACKGROUND-COLOR:#XXXXXX;
  COLOR:#YYYYYY;
  FONT-FAMILY:ZZZZZZ;
  }
</style>

Where:

DOWN DOWN MENU FOR MUSIC

Here is a simple drop down menu that can play one of three .mid songs:

All you do is replace the page name with the song name, e.g. canyon.mid, callmyname.mid or zorba.mid in the code for the drop down menu.

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the script from old browsers --
function surfto(form) {
var myindex=form.dest.selectedIndex
location=form.dest.options[myindex].value;
}
//-->
</SCRIPT>

<FORM>
<SELECT NAME="list" SIZE=1 OnChange="location=getSelect(this)"≫
<OPTION value="#> Select A Song
<OPTION value="canyon.mid">Canyon
<OPTION value="callmyname.mid">Call My Name
<OPTION value="zorba.mid">Zorba The Greek
</SELECT>
</FORM>