Drop down menus ala Digg

•

What is DaniWeb IT Discussion Community?

You're currently browsing the Web Development category of DaniWeb, a massive community of 370,585 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,974 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our Web Development advertiser:

•

Ben's Blog

Web Development

Jul 11th, 2006, 1:55 pm

Show Printable Version

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.

Help with Code Tags

(Toggle Plain Text)

<!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>

<!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>

This blog entry was written by ben_. It has received 2,389 views, 0 comments, and 2 linkbacks.

Post Comment

•

Only community members can start a blog or comment on blog entries. You must register or log in to contribute.

•

DaniWeb Web Development Marketplace

Related Blog Entries

ISO Uses PDFs Too, Standardizes Format (17 Days Ago)
Microsoft announces host of new Internet Explorer 8 security features (17 Days Ago)
Latest Mac OS X Trojan Might Be Sign of Things to Come (19 Days Ago)
Yahoo Mail Open—then Closed—to Hackers (23 Days Ago)
Barack Obama is following me on Twitter! (24 Days Ago)
Salesforce Says ‘Hey, Google, Get Onto My Cloud’ (26 Days Ago)
Web forms are still the gateway to security hell (28 Days Ago)
Ruby, Ruby, Ruby - Vulnerable, Vulnerable, Vulnerable (28 Days Ago)
No Flash Required: SproutCore Project For Rich Browser Apps (31 Days Ago)
EBay, PayPal Pal up Further With Developers (33 Days Ago)

Related Forum Threads

Slide In, Slide Out, ala Digg (JavaScript / DHTML / AJAX)
G'day Mate (Community Introductions)
Drop-down menus not appearing (Windows NT / 2000 / XP / 2003)
IE 6 missing File, etc. Drop Down Menus (Windows NT / 2000 / XP / 2003)
Fly-over menu ??? (Site Layout and Usability)

DaniWeb Home > Blogs > Member Blogs > Ben's Blog

Drop down menus ala Digg