PDA

View Full Version : Basic Drop Down Menu



netroact
Mar 8th, 2007, 03:26 AM
I am looking for the code to do a javascript onClick drop-down menu. All the examples I find are for navigation. I need to submit the values in the menu to a server side script. I know how to make a regular html drop down menu in a form, but it requires a submit button. I just need to create a form with a single menu that will submit immediately on selection.

Any assistance would be greatly appreciated.

phoenixshade
Mar 8th, 2007, 03:38 AM
Well, if that's the whole form, I'd do it just like a navigation menu, and hardcode the selection into the anchors' query strings, like this:

<a href="process.php?choice=item1">item1</a>
and in the process.php file, I'd use $_GET variable to read the selected value.

netroact
Mar 8th, 2007, 03:45 AM
As usual I didn't construct my question correctly.

I should have said this is for a Perl script, and I will have more than one selection on the menu. I want a drop down menu, and not a hyperlink. Thanks for the reply though.

phoenixshade
Mar 8th, 2007, 04:10 AM
As usual I didn't construct my question correctly.

I should have said this is for a Perl script, and I will have more than one selection on the menu. I want a drop down menu, and not a hyperlink. Thanks for the reply though.

Sorry, I guess I just didn't expound enough... It's still the same idea, though, and javascript isn't needed.* Create a CSS-based dropdown list:

<div id="dropdown">Select One:
<ul id="dropdown">
<li><a href="cgi-bin/process.cgi?choice=item1">item1</a></li>
<li><a href="cgi-bin/process.cgi?choice=item2">item2</a></li>
<li><a href="cgi-bin/process.cgi?choice=item3">item3</a></li>
</ul>
</div>
Style the div and the list to create a drop-down list, something like this:


#dropdown { position:relative; }
#dropdown ul {
display:none;
position:absolute;
top:0;
}
#dropdown:hover ul, #dropdown.over ul {
display:block;
}
Of course, you'd probably apply more styling to pretty it up, but that's the basic skeleton for a drop-down menu that needs no javascript.

The point of the hyperlinks is that the data will immediately submit on click with no need for a submit button or for a javascript onClick event handler. The perl program can read the query string (the part after the ?) in the url.

Or am I still misunderstanding something? I'm assuming you want the user to mouse over, see the list, and make exactly one selection. Do you want the user to be able to select more than one item? In that case, you probably would need javascript. I suppose you could forgo the need for a submit button using a javascript onMouseOut event to submit or something, but that could be pretty sloppy if someone moves their mouse at the wrong time...

* A small fib. For IE6 and older versions, a short javascript is needed to add the over class to the div onMouseOver, because IE6 doesn't get the :hover pseudo-class right for anything other than <a>s.

netroact
Mar 8th, 2007, 04:21 AM
Thanks for your help. I think that will work fine.

phoenixshade
Mar 8th, 2007, 05:50 AM
Just for the heck of it, I threw this together. It could use an IE6 hack for the width of the <a>s, but that's not completely necessary. It's just a more complete version of the CSS above, but since you are posting in the javascript forum, I'm not sure how familiar you are with the ins and outs of CSS dropdowns. Hopefully this will get you going in that direction.

Here's the CSS:

#dropdown {
width:150px;
position:relative;
color:#999;
}
#dropdown ul {
list-style:none;
margin:0;
padding:0;
display:none;
position:absolute;
top:0;
left:0;
background-color:#FFF;
border: solid 1px #999;
}
#dropdown a {
padding:2px 10px;
width:130px;
display:block;
text-decoration:none;
color:#999;
}
#dropdown a:hover {
color:#FFF;
background-color:#CCC;
}
#dropdown:hover ul, #dropdown.over ul {
display:block;
}
This works on the same HTML given above with a slight change to add the class to the <div> onMouseOver. (This is needed to make it work in IE6.):

<div id="dropdown" onMouseOver="javascript:this.className='over';" onMouseOut="javascript:this.className='';">Select One:
<ul id="dropdown">
<li><a href="cgi-bin/process.cgi?choice=item1">item1</a></li>
<li><a href="cgi-bin/process.cgi?choice=item2">item2</a></li>
<li><a href="cgi-bin/process.cgi?choice=item3">item3</a></li>
</ul>
</div>
That should do it for you.