Menus 
JavaScript Code for You


Select from List
List with Button
Drop Down
 onMouseOver Pointer
Remote
Additional Information

Additional Menus available on Advanced page.
Click on any green divider line to return here.

 

Select from List

   


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
  function loadPage(pageURL){
    location.href = pageURL.options[pageURL.selectedIndex].value
    }
//-->
</SCRIPT>


<FORM>
<FONT SIZE=4>     
<P>&nbsp;&nbsp;
<SELECT NAME="selectMenu1" onChange="loadPage(this)" SIZE=4>
  <OPTION VALUE="jsC4U.htm">Code 4 U</OPTION>
  <OPTION VALUE="jsC4Udate.htm">Date & Time</OPTION>
  <OPTION VALUE="jsC4Uclocks.htm">Clocks</OPTION>
  <OPTION VALUE="jsC4Uscrollers.htm">Scrollers</OPTION>
  <OPTION VALUE="jsC4Umenus.htm">Menus</OPTION>
  <OPTION VALUE="jsC4Umisc.htm">Miscellaneous</OPTION>
</SELECT>
</FONT> 
</FORM>

 

List with Button

  

    


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
  function loadPage(pageURL){
    location.href = pageURL.options[pageURL.selectedIndex].value
    }
//-->
</SCRIPT>


<FORM>
<FONT SIZE=4>     
<P>&nbsp;&nbsp;
<SELECT NAME="selectMenu2" SIZE=5>
  <OPTION VALUE="jsC4U.htm">Code 4 U</OPTION>
  <OPTION VALUE="jsC4Udate.htm">Date & Time</OPTION>
  <OPTION VALUE="jsC4Uclocks.htm">Clocks</OPTION>
  <OPTION VALUE="jsC4Uscrollers.htm">Scrollers</OPTION>
  <OPTION VALUE="jsC4Umenus.htm">Menus</OPTION>
  <OPTION VALUE="jsC4Umisc.htm">Miscellaneous</OPTION>
</SELECT>
</FONT> 
<BR><BR>&nbsp;&nbsp;&nbsp;
<INPUT TYPE=BUTTON VALUE="GO" 
onClick = "loadPage(this.form.selectMenu2)">
</FORM>

 

Drop Down

   


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
  function loadPage(pageURL){
    location.href = pageURL.options[pageURL.selectedIndex].value
    }
//-->
</SCRIPT>


<FORM>
<FONT SIZE=4>     
<P>&nbsp;&nbsp;
<SELECT NAME="selectMenu3" onChange="loadPage(this)">
  <OPTION VALUE="jsC4U.htm">Code 4 U</OPTION>
  <OPTION VALUE="jsC4Udate.htm">Date & Time</OPTION>
  <OPTION VALUE="jsC4Uclocks.htm">Clocks</OPTION>
  <OPTION VALUE="jsC4Uscrollers.htm">Scrollers</OPTION>
  <OPTION VALUE="jsC4Umenus.htm">Menus</OPTION>
  <OPTION VALUE="jsC4Umisc.htm">Miscellaneous</OPTION>
</SELECT>
</FONT> 
</FORM>

 

onMouseOver Pointer

Code 4 U
Date & Time
Clocks
Scrollers
Menus
Miscellaneous 


<SCRIPT Language="JavaScript1.1">
<!-- hide from old browsers
  var menuImg0 = "sel0.gif" 
  var menuImg1 = "sel1.gif" 
  
  function changeImgOver(imgName){
    imgName.src = menuImg1
    }

  function changeImgOut(imgName){
    imgName.src = menuImg0
    }
//-->
</SCRIPT>


<FONT SIZE=4>     
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m1">  
<A HREF="jsC4U.htm" onMouseOver="changeImgOver(m1)" 
onMouseOut="changeImgOut(m1)">Code 4 U</A>
<BR>
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m3">  
<A HREF="jsC4Udate.htm" onMouseOver="changeImgOver(m3)" 
onMouseOut="changeImgOut(m3)">Date & Time</A>
<BR>
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m4">  
<A HREF="jsC4Uclocks.htm" onMouseOver="changeImgOver(m4)" 
onMouseOut="changeImgOut(m4)">Clocks</A>
<BR>
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m5">  
<A HREF="jsC4Uscrollers.htm" onMouseOver="changeImgOver(m5)" 
onMouseOut="changeImgOut(m5)">Scrollers</A>
<BR>
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m6">  
<A HREF="jsC4Umenus.htm" onMouseOver="changeImgOver(m6)" 
onMouseOut="changeImgOut(m6)">Menus</A>
<BR>
<IMG SRC="sel0.gif" WIDTH=10 HEIGHT=10 BORDER=0 NAME="m7">  
<A HREF="jsC4Umisc.htm" onMouseOver="changeImgOver(m7)" 
onMouseOut="changeImgOut(m7)">Miscellaneous</A>
</FONT>

 

Remote


<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var popRemote = null

  function openRemote(){
    popRemote = window.open("jsC4Urdemo.htm", "jsRemote", 
                "width=260,height=300,scrollbars")
    }
//-->
</SCRIPT>


<FORM>
<INPUT TYPE="button" VALUE="Remote Demo" onClick="openRemote()">
</FORM>

 


Additional Information on These Scripts


You will have to modify the above scripts to add your own links. I hope that I have furnished enough information here for you to easily do that. Additional information to help you set up these scripts is provided below.


Testing these Menus - You will have to use your browser's back button to get back to this page if you test the functions of the menus shown here.


Menu 1, Menu 2 and Menu 3 - Only one simple Javascript function is required for each of the first three menus. In fact, the same JavaScript function is used for each of the menus. The SIZE property of the SELECT tag determines how the menu will appear. It was set to 4 for the first demo menu and 5 for the second. Leaving it out completely results in Menu 3. SELECTED was added to the second menu so that a choice is already selected. This is needed to prevent an error from occurring when someone pushes the go button without first making a selection.

Use these menus on your page by modifying the code that goes in the body to include the URL's that your are interested in. These URL's can be relative as I used here or can be a full URL such as http://www.netscape.com.

If you are using frames, you will probably want the selected URL to appear in a different frame. To accomplish this, you must modify the loadPage() function that you put in your HEAD section to include the name of the target frame. This is best illustrated with an example. If you have named the target frame "frame2", then the loadPage() function will be as follows: 

  function loadPage(pageURL){
    parent.frame2.location.href = pageURL.options[pageURL.selectedIndex].value
    }
If your target frame has some other name, then just substitute it for "frame2" in the above example.


Menu 4 - There are two small images in the table below that you need to copy to your page for this menu to work. The first is an invisible gif. Of course, you can use your own images if your prefer.


Menu 5 - You need to write some html code similar that shown below to include the links to each of the pages that your want available from your remote. This file is opened in the pop-up window. I named it 'jsC4Urdemo.htm' for this demo, but you can call it anything as long as you include the name you selected in the call to the pop-up window.

Note that I close the pop-up menu every time a selection is made. This means that you will have to put a button or link on every page that you link to the remote so that the remote can be recalled. If you use frames, then you can just put the button on a frame that is continuously displayed. You can remove this feature if you want by deleting the line self.close() from the gotoURL() function and the onBlur="self.close()" from the body tag. 


<HTML>
<HEAD>
<TITLE>Remote</TITLE>
<SCRIPT Language="JavaScript">
<!--
  function gotoURL(myURL){
    window.opener.parent.frame2.location.href=myURL
    self.close()
    }
//-->
</SCRIPT>
</HEAD>

<BODY bgcolor="FAF0E6" link="#008080" vlink="black" text="#708090" 
onBlur="self.close">

<!-----Title----->
<CENTER><FONT Face="Arial" Color="#669999" size=4>
<FONT Color="#FF3333" size=5>R</FONT><U>emote</U> 
<FONT Color="#FF3333" size=5>D</FONT><U>emo</U>
</FONT><BR>
</Center>
<P><BR>

<Font Face="arial" size=4>
<A href='JavaScript:gotoURL("jsC4U.htm")'>Code 4 U</A>
<FONT size=2>- Cut and Paste Scripts</FONT><BR>
<FONT size=3>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4U.htm#instructions")'>
Instructions</A><BR>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4Udate.htm#DateTime")'>
Date & Time</A><BR>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4Uclocks.htm#clock")'>
Clocks</A><BR>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4Uscrollers.htm#scrollers")'>
Scrollers</A><BR>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4Umenus.htm#menus")'>
Menus</A><BR>
&nbsp;&nbsp;<A href='JavaScript:gotoURL("jsC4Umisc.htm#misc")'>
Miscellaneous</A>
</Center>
</FONT>

<P><HR><FONT SIZE=1>This remote is put away each time 
you make a selection. Just click on REMOTE Demo button to 
make another selection.
</FONT>

</BODY>
</HTML>





Scrollers     Miscellaneous