PDA

View Full Version : Drop down menus in HTML



sean
06-08-2002, 04:00 PM
You know those menus where you push on the little arrow and a menu drops down? I need to know the HTML tag and the basic attributes for that option. Also, how can I make it so that the browser submits the form to the CGI file when someone selects something from the list, without them having to push a button? I know it possible because Hotmail has an option where it can do that when you're selecting folders, but I've never seen the code for it.

Commander
06-08-2002, 04:18 PM
I can give u a source for a pulldown menu!
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var refer=true;
function combo() {
if (refer) {
document.all.contents.style.visibility="visible";
refer=false;
}
else {
document.all.contents.style.visibility="hidden";
refer=true;
}
}
</script>

</HEAD>



<BODY>

<table align="center">
<tr><td>
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#d8d8d8">
<tr>
<td bgcolor="d8d8d8">
<font face="verdana" size="2"> Choose a link</font>
</td>
<td align="right" width="21">
<img src="img/combo_arrow.gif" name="combo_arrow" width="21" height="21" alt="" border="0" onclick="combo()" ></td>
</tr>
</table>
<div id="contents" style="position:absolute; left:?px; top:?px; width:?px; height:?px; z-index:1; visibility:hidden">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#d8d8d8">
<tr>
<td bgcolor="d8d8d8">
<font face="verdana" size="2">
<a href="#"> ENTER LINK HERE</a><br>
<a href="#"> ENTER LINK HERE</a><br>
<a href="#"> ENTER LINK HERE</a><br></font>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>

you could use this image, u don't need it though, u could put your own.

Commander
06-08-2002, 04:19 PM
shoot, i forgot to attach the file, sorry

frenchfry164
06-08-2002, 06:39 PM
I think there is a really easy way to do it in DHTML too.

sean
06-08-2002, 06:55 PM
But I'm sure there is an html tag to do i. I'm not 100% sure but I think its <select>

frenchfry164
06-08-2002, 07:09 PM
for DHTML just do a onMouseOver thing on the thing that the dropdown comes out of, then display the menu below. Do the matrix hyperlinking for each one of those options. It downloads faster, but also runs faster

Dual-Catfish
06-08-2002, 07:33 PM
Taken from this pages source:



<option value="0">COLOR</option><!-- you should edit this list to remove the colors you don't want -->
<option value="skyblue" style="color:skyblue">sky blue</option>
<option value="royalblue" style="color:royalblue">royal blue</option>
<option value="blue" style="color:blue">blue</option>
<option value="darkblue" style="color:darkblue">dark-blue</option>
<option value="orange" style="color:orange">orange</option>
<option value="orangered" style="color:orangered">orange-red</option>
<option value="crimson" style="color:crimson">crimson</option>
<option value="red" style="color:red">red</option>
<option value="firebrick" style="color:firebrick">firebrick</option>
<option value="darkred" style="color:darkred">dark red</option>
<option value="green" style="color:green">green</option>
<option value="limegreen" style="color:limegreen">limegreen</option>
<option value="seagreen" style="color:seagreen">sea-green</option>
<option value="deeppink" style="color:deeppink">deeppink</option>
<option value="tomato" style="color:tomato">tomato</option>
<option value="coral" style="color:coral">coral</option>
<option value="purple" style="color:purple">purple</option>
<option value="indigo" style="color:indigo">indigo</option>
<option value="burlywood" style="color:burlywood">burlywood</option>
<option value="sandybrown" style="color:sandybrown">sandy brown</option>
<option value="sienna" style="color:sienna">sienna</option>
<option value="chocolate" style="color:chocolate">chocolate</option>
<option value="teal" style="color:teal">teal</option>
<option value="silver" style="color:silver">silver</option></select>

MethodMan
06-08-2002, 08:00 PM
I know it can be easily done in javascript, as demonstrated above, if you want more than one drop down menu, go to www.nhl.com, and see the javascript for the different teams, and just 'take' the code, hehe.

sean
06-09-2002, 10:14 PM
Dual-catfish is a genius.... phsyicic whatever - that's exactly what I was after. Thanks dude.

Zeeshan
06-10-2002, 01:41 PM
I'm pretty sure, it can't be done in HTML alone.

sean
06-11-2002, 12:39 PM
I thought I'd seen it before somewhere. I'll try what dual-catfish (nice title BTW!) gave me. Looks promising.