Code to make a drop down menu inside a frame which will open a page inside the same browser window."
It's easy to make a drop down menu, but do remember this: If you want the menu to open up your target page in the same window or browser from within a frame or iframe, use the * character.
Another note. You cannot load a page full of drop down menus. Normally you'll only be able to place one drop down menu in an html document. You can however, place as many iframe as necessary to accomodate your drop down menus, by creating small html documents with your drop down menus. On this page alone, you will find four drop down menus. Each of the drop down menu was loaded into the page via iframe.
Below is the code for the drop down menu on our History of the Christian Church section. It's targeted to open the browser in the same window by using "*_top". If you want to target outside of the frame, opening a new window you would use "*_blank"
This particular form was designed to execute when the user makes their choice and presses on "go".
An easy way to make your drop down menu is located here.Fill in the fields with your form information and the form generates your code for you.
The code below generates this drop down menu:
We paste this code into our pages for the drop down menu (*for perfect frame alignment, go here):
<table style="width: 315px; height: 50px" align="center" border="0"><tbody><tr><td><iframe allowtransparency="true" width=315 scrolling=no height=50 frameBorder=0 src="menu.html"></iframe></td></tr></tbody></table>
<html> <head> <title>Site Map - Menu</title> <base href="http://www.example.com/sheldon/menu.html"> <meta content="Yours Truly" name=author> <meta content="Menu." name=description> <meta content="keywords, are, optional" name=keywords> <meta content="index,follow" name=robots> <style>body {scrollbar-arrow-color: #5B5959; font-family: tahoma; scrollbar-darkshadow-color: #000000; scrollbar-base-color: #ececec; background-color: #c6c6c6} a {color: #808080; text-decoration:none} a:hover{font-weight:bold}</style> <script> <!-- function land(ref,target) { lowtarget=target.toLowerCase(); if (lowtarget=="_self") {window.location=loc;} else {if (lowtarget=="_top") {top.location=loc;} else {if (lowtarget=="_blank") {window.open(loc);} else {if (lowtarget=="_parent") {parent.location=loc;} else {parent.frames[target].location=loc;}; }}} } function jump(menu) { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("*"); target=""; if (splitc!=-1) {loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);} else {loc=ref; target="_self";}; if (ref != "") {land(loc,target);} } //--> </script> </head> <body style="color: #ececec; font-family: tahoma"> <!--begin menu--> <form action="dummy" method="post"><select name="choice" size="1" onChange="jump(this.form)" style="background-color:#dfdfdf"> <option value="http://example.com/site/*_top">Site Map</option><option value="http://example.com/page-one.html*_top">Page One</option><option value="http://example.com/page-two.html*_top">Page Two</option><option value="http://example.com/page-three.html*_top">Page Three</option><option value="http://example.com/page-four.html*_top">Page Four</option></select> <input type="button" value="GO!" onClick="jump(this.form)"> </form> </body> </html> |
Setting Styles on Drop Down Menus
Take note of the style="background-color:#c6c6c6;font-size:9px;color:#000000;font-family:tahoma" code. This allows to set your choice of font color, font size, and style tags on your drop down menu. There is no known way to my knowledge, to change the blue arrow on your drop down form. I searched for a day or two to find an answer in an javascript or html tag, but came away empty handed except for a few posts by other webmasters who confirmed this is a default in browsers. However, you can change size of the menu. The menu below does not drop down, rather it scrolls through the options.
The form below is set to open page inside browser window, automatically upon click by user.
Here's Sample One
Here's Sample Two
<html> <head> <title>Site Menu</title> <meta content="Yours Truly" name=author> <meta content="Menu for pages." name=description> <meta content="keywords, are, optional" name=keywords> <meta content="index,follow" name=robots> <style>body {scrollbar-arrow-color: #5b5959; font-family: tahoma; scrollbar-darkshadow-color: #000000; scrollbar-base-color:#fdfdfc; background-color: #c6c6c6} a {color: #619093; text-decoration:none} a:hover{font-weight:bold}</style> <script> <!-- function land(ref,target) {lowtarget=target.toLowerCase(); if (lowtarget=="_self") {window.location=loc;} else {if (lowtarget=="_top") {top.location=loc;} else {if (lowtarget=="_blank") {window.open(loc);} else {if (lowtarget=="_parent") {parent.location=loc;} else {parent.frames[target].location=loc;}; }}} } function jump(menu) { ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("*"); target=""; if (splitc!=-1){loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);} else {loc=ref; target="_self";}; if (ref != "") {land(loc,target);} } //--> </script> </head> <body style="color: #000000; font-family: tahoma"> <!--begin menu--> <form action="dummy" method="post"> <select name="choice" size="2" onChange="jump(this.form)" style="background-color:#c6c6c6;font-size:9px;color:#000000;font-family:tahoma"> <option value="http://groups.yahoo.com/*_blank">Mail List</option> <option value="http://www.example.com/site-map/*_top">Main Index</option> <option value="http://www.example.com/site-map/hello.html*_top">Price of Eggs in China</option> <option value="http://www.example.com/site-map/its-me.html*_top">I love em scrambled</option> <option value="http://www.example.com/site-map/how-are-you.html*_top">Never tried with ketchup</option> </form> </body> </html> |
No comments:
Post a Comment