Drop Down Menu Inside Frame
http://artscape.edwardtbabinski.us


Ring List
Ring List Next Home Contact

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>History of the Christian Church - Menu</title>
<base href="http://www.edwardtbabinski.us/sheldon/menu.html">
<meta content="Sharon Mooney and Edward T. Babinski" name=author>
<meta content="Menu for the History of the Christian Church, by Henry C. Sheldon, 1895." name=description>
<meta content="Apostles, Paul, Christian History, Historian, Church History, Early Church, Midieval, Christianity" 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://edwardtbabinski.us/sheldon/*_top">Early Church</option>
<option value="http://edwardtbabinski.us/sheldon/mediaeval_church.html*_top">Mediaeval Church</option>
<option value="http://edwardtbabinski.us/sheldon/modern_church_part_i.html*_top">Modern Church, Part I</option>
<option value="http://edwardtbabinski.us/sheldon/modern_church_part_ii.html*_top">Modern Church, Part II</option>
<option value="http://edwardtbabinski.us/sheldon/modern_church_part_iii.html*_top">Modern Church, Part III</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>Animal and Cetacea Evolution Menu</title>
<meta content="Sharon Mooney and Edward T. Babinski" name=author>
<meta content="Menu for pages which cover animal evolution, including photographs/pictures." name=description>
<meta content="creation, evolution, intelligent design, darwin" 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.edwardtbabinski.us/whales/*_top">Cetacean Evolution (Whales, Porpoises, Dolphins) Main Index</option>

<option value="http://edwardtbabinski.us/mpm/mpm_whale_limb.html*_top">Milwaukee Public Museum Whale Mount Photographs</option>

<option value="http://www.edwardtbabinski.us/manatee/sirenian_evolution.html*_top">Sirenian (Sea Cow, Manatee, Dugong) Evolution</option>

<option value="http://www.edwardtbabinski.us/articles/snake_vestigial_limb.html*_top">Snake Evolution</option>

</form>

</body>

</html>

Message awaits moderator approval

RELATED ARTICLES
Copyright Protection and the Law
Understanding copyrights, and what can and cannot be used when using the intellectual property of another author.

Frames, Perfect Alignment on iframe and Rotating Banner Script
How to create iframes that align perfectly to the edge, and can rotate banners.
I have found this to be a very useful set of scripts. The frame is instructed to load a random target (which can be any number of ads or what-nots), including large ads, but still with delayed loading time and without interfering with the visitor leaving the site with one click on the back button (utilizing the script on the page you're currently on). This script has also proven invaluable with AdSense's "alternative inhouse" ads, it's an *.shtml format, small, clean and free. Works perfect inside an iframe! for rotating ads.

Meta Tag, Javascript Refresh and Time Delay
Javascript which enables the browser to load a time-delayed target page into an iframe, but omits the loading page from the browser history.

ASCII - HTML - Unicode Character Entities Chart
Includes thousands of html code for standard ASCII entity equivalents, and foreign languages; arabic, greek, etc, decorative characters and mathematical characters, with instructions on using the number pad and ALT.



Article last updated November 7, 2005
Certified error free by http://htmlvalidator.com