Lissa Explains it All -- HTML Help for Kids


| Section 1 | Section 2 | Section 3 | Section 4 |
| Section 5 | Section 6 | Section 7 | Section 8 |
| Section 9 | Section 10 | Section 11 | Section 12 | Section 13 |


How do I add a drop-down menu on my page?
How do I add a drop-down menu that targets frames?



How do I add a drop-down menu on my page?   Adding a drop-down menu is pretty simple. You just add the following code, but add your own links. Use CSS (input, text area) to change the font and color properties.



<form name="gotolocation1" method="POST" ACTION=URI>
<select name="lissamenu1">
<option value="http://www.lissaexplains.com">Lissa Explains it All</option>
<option value="http://www.lissaexplains.com/cursor.shtml">Lissa's Cursors</option>
<option value="http://www.lissaexplains.com/home">Lissa's Page</option>
</select>
<input type="button" onClick="location =
document.gotolocation1.lissamenu1.options
[document.gotolocation1.lissamenu1.selectedIndex].value;"
value="Go">
</form>

It looks like this:



If you would like a menu without the "go" button, you can use this code instead:

<form ACTION=URI>
<select name=lissamenu3
onchange="location.href=(form.lissamenu3.options[form.lissamenu3.selectedIndex].value)">
<option value="0"> Choose One</option>
<option value="0"></option> (This line adds a space in your menu)
<option value="http://www.lissaexplains.com"> Home</option>
<option value="http://www.lissaexplains.com/basics.shtml"> Basics</option>
<option value="http://www.lissaexplains.com/tools.shtml"> Links</option>
</select>
</form>

Your menu will look like this:



If you want to add color to your menu, add the following style tag to your option value:

style="background-color:#000000;"

Your option would look like this:

<option value="http://www.lissaexplains.com"style="background-color:#000000;">Home</option>

You can add your own 6 digit color number in the above code. You can change anything in bold.

It's really important to remember that if you're going to use more than one drop down menu on your page, you'll have to name your forms differently. Replace the words "lissamenu1" or lissamenu2" with a different name on your page. Also, the If you don't have different names for your forms you will get a script error (the form name in my example is "gotolocation1").

up


How do I add a drop-down menu that targets frames?   Finally!!! A drop down menu that you can use to target frames. Copy and paste this code, remember to subsitute your own info where you see bold text, and also remember to target your frame, you have to change "yourframename" to your own frame name that you want to target. You can add more links, I only have 3 listed in this code:

<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value,
target="yourframename");
}
}
//-->
</script>

<form name="lissamenu2" ACTION=URI>
<select name="menu" onchange="jump(this.form)">
<option value="0">Where to?</option>   
<option value="0"></option>   (this adds a space).
<option value="http://www.lissaexplains.com">Home</option>
<option value="http://www.lissaexplains.com/fun.shtml">Fun Stuff</option>
<option value="http://www.lissaexplains.com/cursor.shtml">Lissa's Cursors</option>
</select>
</form>

It looks like this:



up




| About Lissa | Privacy Statement | Contact | Link Us |

Copyright 1997-2016 Lissa, All rights reserved
This Web site is registered with the Library of Congress Copyright Office.


lissaexplains.com


Lissa Explains it All -- HTML Help for KidsHTML Help, css, frames, tables, div layersCustom CursorsHTML Help ForumFree E-mail Service for Kids (and adults who love bright colors ;)Lissa Explains it All -- Free PostcardsLissa Explains it All -- MerchandiseLissa Explains it All -- Guestbook
HTML BasicsHTML TutorialCSS TutorialFrames TutorialTables TutorialColor TutorialFree JavascriptsFun Free Stuff for your siteMySpace TutorialHTML Tutorial
spacer