The little menu system Digg has for reporting posts can be used to simplify a lengthy list of options.
I decided to do something similar and then I thought I'd give it away because it's really quite simple and easy to do.
Esto está disponible en español en esta página.
I've been using JavaScript for several years now and one of it's best uses is definitely to increase usability. Some people will argue that it is done at the cost of accessibility, but fie on them!
There's a lot of comments scattered through which should help you understand what exactly is going on and how to customise it for your needs.
You can also use multiple dropdowns on a page as long as they fit the format provided here, or whatever you adjust it to.
Here's the code, you can view it in action
here.
This is released under the "do whatever you want" license, which I just created then. If you want you can credit me for it, I don't really mind though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Drop downs - Digg Style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
/* the css
note on background images:
dropdown.jpg is optional and would be a graphic that looks like some sort of drop down
dropdownarrow.jpg sits in the top right of the heading, which is a block element so it's
the full width.
the rest of it is positioning and formatting to make it look purdy
*/
.dropdown { cursor: pointer; float: left; margin: 0px 3px; height: 24px; width: 149px; background: #FFF url(/images/droplarge.jpg) no-repeat; }
.dropdown * { margin: 0px; padding: 0px; font-family: Verdana, Helvetica, sans-serif; }
.dropdown h3 { font-weight: normal; font-size: 10px; border: 1px solid #CCC; background: transparent url(/images/droplargearrow.jpg) no-repeat top right; }
.dropdown h3 span { padding: 3px; text-indent: 3px; display: block; }
.dropdown ul { margin-top: -1px; display: none; position: absolute; background-color: #FFF; padding: 3px; width: 141px; border: 1px solid #CCC; }
.dropdown li { display: block; padding: 2px; border-bottom: 1px dotted #CCC; }
.dropdown a { font-size: 10px; text-decoration: none; color: #069; }
.dropdown a:hover { text-decoration: underline; }
/* the last one we don't put a border on */
.dropdown li.last { border-bottom: none; }
</style>
<script type="text/javascript">
// active lets us keep track of which menu if any is currently being displayed
var active;
// toggles a dropdown between being visible / invisible
function toggle(t)
{
// if there's an active drop down we hide itcingu
if(active != null)
{
for(var i=0; i<active.childNodes.length; i++)
if(active.childNodes[i].nodeName == "UL")
active.childNodes[i].style.display = "none";
}
// if the user didn't just click the active one (hiding it)
if(active != t)
{
// set the active dropdown
active = t;
// set each UL in the dropdown to be "block"
for(var i=0; i<active.childNodes.length; i++)
if(active.childNodes[i].nodeName == "UL")
active.childNodes[i].style.display = "block";
// bring it to the top
active.style.zIndex = "999";
}
else
active = null;
}
// used to untoggle when a dropdown link is clicked
function untogglefromlink(t)
{
// when a link is clicked in the drop down you can call this function to hide it, eg:
// <a href="page.html" onclick="untogglefromlink(this);">whatever</a>.
toggle(t.parentNode.parentNode.parentNode);
}
</script>
<noscript>
<!--
notes on the noscript block
this allows you to reformat the dropdown for people who do not have
javascript
-->
<style type="text/css">
/* put whatever here */
</style>
</noscript>
</head>
<body>
<div class="dropdown" onclick="toggle(this);">
<h3><span>Drop down menu</span></h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="last"><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>
