Today is . Page created 05/24/07

Dropdown Menu Box Drop Down Info Box Menu

This is Selection Number 1.
Ma quande lingues coalesce, li grammatica del resultant.
This is Selection Number 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This is Selection Number 3.
Images Allowed
Images and HTML allowed
This is Selection Number 4.
Epsum factorial non deposit quid pro quo hic escorol.
This is Selection Number 5. This is how the default will appear.
This is Selection Number 6.
This has the border defined as border: 3px groove;
[ See Where & Howto ]

This script reveals information, based on the user's selection in a drop down box. Can be used for a FAQ, contact info, and more. Short and sweet, with comments.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.21, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.


Depending on your knowledge of HTML and javascripts, this is an easy four (4) part copy and paste code that goes in both the <HEAD> (2 parts-CSS Section and external.js file) and <BODY> section (wherever you want it to appear) of your document. The external .js file you will need to save and upload into your directory (which by the way does not have any reconfigurations) then add a snipplet of code into the <HEAD> section to call the external.js file.

Let us start with the CSS section of code. This is for all intensive purposes the cosmetic appearance of each option that will appear upon selection of the drop down menu. Unlike most CSS codes, this one has the capability to make each selection different instead of the usual appearance of all looking the same. As you can see in our above example, each option appears different (cosmetically). See below where and howto reconfigure this section.

<style type="text/css">

#form1 {
color: #000;
background:#EFE3C2;
padding: 10px;
width:175px;
display:none;
}

#form2 {
color: #fff0f5;
background:#000000;
width:200px;
padding: 10px;
display:none;
}

#form3 { color: #fff0f5;
background:#000000;
width:175px;
padding: 10px;
display:none;
See Explanationborder: 2px dotted; color:red;See Explanation
}

<!-- Notice The Below --->
<!-- Next Chronological Number -->
<!-- More Than Default Of three -->

#form4 { color: #fff0f5;
background:#000000;
width:175px;
padding: 10px;
display:none;
}

All of the color coded sections on the left can be reconfigured to your specifications. Just play around with them until it works for you. Notice each section is a total entity in itself ; #form1, #form2 etc. This is why each section can be configured totally different and apart from any other.

  • Define Attributes
  • color: #000;     This refers to the font color for each option that appears. It can be either three digit or six digit HEX.
    [ HEX 3 And 6 Color Chart ]
  • background:#EFE3C2;     This refers to the background of each option that appears.
  • padding: 10px;     This refers to how much padding (space) surrounding (left, right, top and bottom) the material inside of the option. If this is slightly confusing see the below examples.
    Padding Defined As 5px; Padding Defined As 20px;
  • width:200px;     This refers to how wide (from left to right) the option will be that appears.

  • See Explanation Notice the attribute surrounded by the asterisk. This is an add-on not part of the script. If you would like a border around an option(s), then just add the below into the CSS code where you want the border.

    border: 2px dotted; color:red;

    [ Return Whence You Came ]

  • With the above attribute for a border, you can change the "dotted" to "solid" or "groove". If you opt for "groove" then the color attribute is moot and not needed.
    See below and also Selection Number 6 above.
    border;3px groove;

For Your Information For your Information:     In regards to the above CSS section, if you need to add more than the default number of three (3) options, just follow the above format and do not forget to go up with the numbers chronologically or the effect will not work correctly.

The last thing we will cover with the CSS section is the way you add this into your document.
The script site tells you to......
"......Paste this code into your external CSS file or in the <style> section within the <HEAD> section of your HTML document......"

  1. The CSS section of copy and paste code does not have opening or closing CSS tags. If you would paste it as-is into the <HEAD> section, you would get a bunch of unwanted code on the page and wonder why.
  2. You need to enclose this section of code with

    <style type="text/css">
    CSS Section Of Code Goes Here
    </style>     		<!---------- Opening CSS Style Tag

    <!---------- Closing CSS Style Tag
  3. If you are going to add this CSS section of code into an external location and call it from an external directory then follow the below steps.
  4. Copy/cut and paste this section of code into notepad (without the opening and closing above tags) and save it as dropDowninfoBox.css*
  5. The newly created (Saved As) file will look something like this   dropDowninfoBox.css or this dropDowninfoBox.css
  6. Upload the newly created dropDowninfoBox.css file into your directory
  7. Paste the below snipplet of code into the <HEAD> section of your document to call the dropDowninfoBox.css file.

    <link rel="stylesheet" type="text/css" href="dropDowninfoBox.css">

  8. If you have uploaded the dropDowninfoBox.css file into a different directory, you will have to change the path of the above to reflect the location.
  9. If changing the path is a little confusing or you need a little refresher on howto, grab the below link and it is explained in detail.
    [ Upload To Different Directory ]
* We named our external.css file dropDowninfoBox.css. This is just so we know what it is to at any given moment. You can name it anything you want. This is entirely up to you on this.

Afer the above in done, now you will need to make another section of code into an external.js file. Same procedure as with the external.css file just with this it will have the file extension of .js attached and once "Saved As" it will look something like this.
dropDownInfoBox.js
Once uploaded now paste the below snipplet of code into the <HEAD> section to call the external.js file.

<script type="text/javascript" src="dropDownInfoBox.js"> </script>

The next part we shall cover is the <BODY> section (both parts) of code. This is copied and pasted anywhere you want the effect to be visible.

First <BODY> Section - Drop Down Menu -

<form name="selector">
<select id="someID" name="someID" onChange="selectForm(this.options[this.selectedIndex].value)">
<option> Select a Question </option>
<option value="1"> Selection 1 Here</option>
<option value="2"> Selection 2 Here</option>
<option value="3"> Selection 3 Here</option>
</select>
</form>

  • To add more than the default, just follow the pattern (in all three sections) and be sure to number every addition in numerical sequence.

    		•

    Second <BODY> Section - What Appears Upon Selection

    <div id="allForms">
    <form id="form1">
    Information For Selection 1 Here.
    </form>
    <form id="form2">
    Information For Selection 2 Here.
    </form>
    <form id="form3">
    Information For Selection 3 Here.
    </form>
    </div>

    For Your Information For your Information:     If you notice in the above both parts that the color coded sections are correlated to each other. Number 1 relates to number 1, number 2 relates to number 2 etc. This also holds true for the CSS part in the <HEAD> section of code. In other words, all three (3) parts must be in sync with each other.

    Warning Logo     Note Of Importance:     On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

    • Right Way:    https://www.angelfire.com/ny5/consigliere/dropdowninfobox.html

    • Wrong Way:    https://www.angelfire.com/ny5/consigliere/dropdowninfobox.html/

    S elect the links above to see what we are explaining about the Right and Wrong URL address.

    On A Final Note     If you notice in our example nothing moves below this effect to make room for the material that appears upon selection. Reason being is quite simple. We added a table around the <BODY> section of code. Since we have material to the right of the effect that takes up the slack, we did not need to add a height attribute into the table. Just add a table such as the below around the effect and play around with the height attribute until you do not get any movement below the largest option that appears. See below howto add the table.

    <table border="1"cellpadding="4"
    cellspacing="3">
    <tr>

    <td valign="top" align="left" height="?">

    <BODY> section of code here

    </td><tr>
    </table>

    		 Just substitute the height value for the ?, align the effect inside the table either left, right or center and either have a border (1 or higher) or use a zero 0 for no border.

    We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
    [ Get Code Here ]   [ Rate This Page ]   Digg It!