SpiffyJr's Blogaroo

Preface

Waaaaasssuuuuupppp? Kidding. Drop-down menus are always a pain for me because you have to remember to do all kinds of CSS and it has to work in 45 different browsers. Rubbish, I say! I recently decided to add an animated drop-down menu to Blitzaroo for the user section. The HTML/CSS was pretty straight forward but I hit a snag with the JavaScript so I sent an email to the Dojo Toolkit Mailing List and got a quick response from Peter Higgins (those Dojo guys are awesome). I promised a few blogs (and more to come in the future)  to showcase some of Dojo’s quick & easy wow features. This post assumes that you already know the basics about Dojo and have included Dojo somewhere in your project. If not, please check out Dojo Campus and the Dojo Toolkit homepage to get started.

Live Demonstration

Take a peak at the live demonstration to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML is pretty straight forward and utilizes an unordered list for the layout. Note: all of the code here is going to be a straight copy/paste from the Blitzaroo source.

<ul id="userMenu" class="tabs">
	<li>
		<div>
			<img src="/images/icons/14/add.png" alt="Add" />
			Add <span class="downArrow">&#9660;</span>
		</div>
		<ul class="dropdown">
			<li>
				<a href="/user/events/add">
					<img src="/images/icons/14/events.png" alt="Event" />
					Event
				</a>
			</li>
			<li>
				<a href="/user/profiles/add">
					<img src="/images/icons/14/profiles.png" alt="Profile" />
					Profile
				</a>
			</li>
			<li>
				<a href="/user/teams/add">
					<img src="/images/icons/14/teams.png" alt="Team" />
					Team
				</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="/user">
			<img src="/images/icons/14/dashboard.png" alt="Dashboard" />
			Dashboard
		</a>
	</li>
	<li>
		<a href="/user/events">
			<img src="/images/icons/14/events.png" alt="Events" />
			Events
		</a>
	</li>
	<li>
		<a href="/user/profiles">
			<img src="/images/icons/14/profiles.png" alt="Profiles" />
			Profiles
		</a>
	</li>
	<li>
		<a href="/user/teams">
			<img src="/images/icons/14/teams.png" alt="Teams" />
			Teams
		</a>
	</li>
</ul>

The only required attributes are class=”tabs” on the root <ul> and class=”dropdown” on each <ul> that is going to be a drop-down menu. The above menu has four regular links (Dashboard, Events, Profiles, and Teams.) and one drop-down menu (Add). I’ve spruced it up a bit by adding a few images but that is completely optional. I use the id tag on the root <ul> for styling the menu. No surprise here but the HTML renders a menu that looks like:

The CSS

.downArrow {
	font-size: 85%;
	vertical-align: text-bottom;
}

#userMenu {
	-webkit-border-radius: 8px;
	background: #f5faf5;
	border: 1px solid #bbcfbb;
	display: table;
	font-size: 13px;
	font-weight: bold;
	list-style-type: none;
	margin: 8px 0;
	padding: 0 12px;
	position: relative;
}

#userMenu li {
	cursor: pointer;
	font-size: 12px;
	list-style: none;
	display: table-cell;
	float: left;
	position: relative;
	text-shadow: 0px 0px 1px #fff;
}

#userMenu li a,#userMenu li div {
	color: #154f14;
	font-size: 11px;
	padding: 5px 12px;
}

#userMenu li a:hover,#userMenu li div:hover {
	background-color: #dae8da;
	text-decoration: none;
}

#userMenu img {
	margin-right: 3px;
	vertical-align: top;
}

#userMenu a {
	position: relative;
	display: block;
}

#userMenu .dropdown {
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	background: #f5faf5;
	border: 1px solid #BBCFBB;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 999;
	top: 24px;
	left: -999em;
	height: 1px;
	display: block;
}

#userMenu .dropdown li {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 145px;
}

#userMenu .dropdown li:hover {
	opacity: 1;
}

#userMenu .dropdown li a {
	display: block;
	padding: 6px 14px;
	text-shadow: 0px 0px 1px #fff;
}

#userMenu .dropdown li a:hover {
	text-decoration: none;
}

I’m a huge fan of CSS3 so I use border-radius quite liberally. Blitzaroo isn’t released yet so I haven’t added the Mozilla border-radius (-moz-border-radius) equivalent so you can either add it or remove the radius all together. The CSS itself is nothing special – I use display: block with a touch of padding on <a> tags and float <li> tags left for the parent so that we have a horizontal menu. With a slight change of the CSS you could create a vertical drop-down (slide out?) menu. I use left: -999em for accessibility (and for the Dojo animation we’ll be using).  So, with the addition of CSS the menu now looks like:

The JavaScript

I found the JavaScript on a tutorial to Create The Fanciest Dropdown Menu You Ever Saw which uses jQuery rather than Dojo. Personally, I think jQuery is over-hyped and I love Dojo (/me wipes nose). I took the JavaScript listed there, combined it with the mailing list love from Peter Higgins, and came up with:

dojo.addOnLoad(function() {
	// user menu special effects
	var userMenu = dojo.byId("userMenu");
	if (userMenu) {
		dojo.query(".dropdown").forEach(function(n) {
	    	var l = dojo.query(n);
	        l.parent().at(0)
				.onmouseenter(function(){
					dojo.style(l[0], "left", "0");
					dojo.fx.wipeIn({node: l[0], duration: 250}).play();
				})
				.onmouseleave(function(){
					dojo.style(l[0], "left", "-999em");
					dojo.style(l[0], "display", "none");
				});
	    });
    }
});

This little snippet recursively checks for .dropdown and when the mouse enters sets left: 0; followed by an animated Dojo wipeIn. On mouse out it sets left: -999em; and then sets the display to none. I tried a number of CSS/FX combinations to come up with a solution that worked and this is about all I could come up with. You could use any combination of Dojo FX to stylize your own menu. My favorites are wipeIn, wipeOut, fadeIn, and fadeOut combined with easing. Try out a few combinations and see what you like best. Enjoy!