• Still work without JavaScript (css-based)
• tabbing through menus functional

So I thought I’d put my money where my mouth is. Here is the Ryan Tvenge rendition of Dropdown Menus.

The html

<ul class="nav fade">
	<li><a href="#">Regular Lists w/ 2 child ul's</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
	<li><a href="#">Div wrapped menu</a>
		<div>
			<p>You can put any html in here you want</p>
			<ul>
				<li><a href="#">Even Lists</a></li>
				<li><a href="#">Even Lists</a></li>
				<li><a href="#">Even Lists</a></li>
			</ul>
		</div>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li class="right"><a href="#">Right-Aligned Menu</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
</ul>
<h2>Vertical Menu</h2>
<ul class="nav vertical fade">
	<li><a href="#">Regular Lists w/ 2 child ul's</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
	<li><a href="#">Div wrapped menu</a>
		<div>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</div>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a href="#">Item 5</a></li>
</ul>

The CSS

/* CSS Dropdowns */
	.nav { clear: both; list-style: none; padding: 0; margin: 0; float: left; width: 100%; }
	.nav.vertical { height: auto; }
	.nav li { display: inline-block; float: left; position: relative; }
	.nav li:hover, .nav li.hover { z-index: 1; }
	.nav li li { display: block; float: none; }
	.nav li a { display: block; }
	.nav.vertical li { float: none; display: block; }
	.nav ul, .nav div, .nav li:hover ul ul, .nav li.hover ul ul { position: absolute; left: -9999px; top: 0; opacity: 0; }
	.nav.fade ul, .nav.fade div, .nav.fade li:hover ul ul, .nav.fade li.hover ul ul { transition: opacity .2s linear; -webkit-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -o-transition: opacity .2s linear; }
	.nav div ul { position: static; left: 0; opacity: 1; padding: 0; background: none; }
	.nav li:hover ul, .nav ul li:hover ul, .nav li:hover div,
	.nav li.hover ul, .nav ul li.hover ul, .nav li.hover div { left: 0; top: auto; height: auto; opacity: 1; }
	.nav li:hover.right ul, .nav li:hover.right div,
	.nav li.hover.right ul, .nav li.hover.right div { left: auto; right: 0; }
	.nav li:hover.right li:hover ul, .nav li.hover.right li.hover ul { right: 250px; } 

	.nav li.hover ul li.hover ul ul, .nav li:hover ul li:hover ul ul, .nav.vertical li:hover ul ul ul, .nav.vertical li.hover ul ul ul, .nav div ul { position: static; left: 0;
		/* box-shadow */-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	}
	/* Customizable Areas */
	.nav { padding: 10px; margin-bottom: 20px; /* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
		/* Gradients */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* IE10+ */
		background: linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* W3C */
	}
	.nav div, .nav ul { width: 250px; background: #fff; color: #000; background: rgba(255,255,255,.9); padding: 10px;
		/* border-radius */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
		/* box-shadow */-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3);
	}
	.nav ul ul ul { background: none; padding: 0; }
	.nav div { padding: 10px; }
	.nav li a { padding: 10px;
		/* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	}
	.nav li a:hover, .nav li a:focus, .nav li a.highlight { color: #005488; padding: 9px; border: 1px solid #f4f287;
		/* gradients */
		background: #fffcc1; /* Old browsers */
		background: -moz-linear-gradient(top, #fffcc1 22%, #fffd8c 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(22%,#fffcc1), color-stop(100%,#fffd8c)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* IE10+ */
		background: linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* W3C */
	}
	.nav li div a, .nav li ul a { }
	.nav.vertical { width: 200px; }
	.nav li ul li:hover ul, .nav li ul li.hover ul, .nav.vertical ul li:hover ul, .nav.vertical ul li.hover ul { left: 250px; top: 0; }
	.nav.vertical li:hover ul, .nav.vertical li.hover ul, .nav.vertical li:hover div, .nav.vertical li.hover div  { left: 200px; top: 0; }

CSS3 Transition Fading Option

If you add a class of “fade” to the parent <ul>, this will add CSS3 faded transitions to the menus.

Right-Aligned Menus

If you want a menu to go be aligned to the right, add a class of “right” to that menu’s parent <li>.

JS Helpers

There is also an accompanying JS file that helps out with a few things:

1. Menus show up when tabbing. If you tab through the site, the appropriate menus will pop up. This does not happen out of the box with :hover pseudo classes and css.
2. The menus work in IE6. This was something I was struggling with for awhile. I decided to put this feature in, just because it was so easy to do. I usually try to stay away from IE6 fixes. What the script is actually doing is adding a “hover” class to any anchor that is hovered over. This code also helps out with the tabbing feature.
3. Highlighting parent anchor. When you’re mouse is hovered over a menu, the parent anchor of that menu will add the “highlight” class to that anchor, which essentially gives it the hover styling.

Vertical Option

What would a drop-down menu be without a vertical option. If you add a “vertical” class to the parent <ul>, the menu will format vertically and the menus will fly out to the right rather than down.

Outstanding Bug

The one bug that really drives me nuts right now is the fading out of the CSS3 transitions. On the vertical and right-aligned menus, it is fading to a different postion, then off of the screen. If anyone can find a fix for this, I would love to hear it.

The Code

demo // download

The html is a straightforward linked unordered list:

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#" title="drop me a line">Contact</a></li>
	<li><a href="#" title="Super-Sweet Developer">Me</a></li>
	<li><a href="#" title="Check Out My Street Creds">Resume</a></li>
	<li><a href="#" title="catch my portfolio">Work</a></li>
</ul>

For the CSS, we are using:

#nav { list-style: none; padding: 0; }
#nav li { display: block; float: left; }
#nav li:hover a, #nav li:focus a, #nav li.current_page_item a { -webkit-transform: rotateY(360deg); background: #fffd8c; color: #005488; }
#nav li a { display: block; padding: 11px 10px 9px; margin-right: 2px; color: #ff7a7a; text-decoration: none; text-transform: lowercase;
	/* css3 */-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
	/* css3 */-webkit-perspective: 700;-webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out;
}

This could will work for the most part, but there is some instances that I’ve only been able to replicate on a Mac machine. When you hover over the link and stop before the animation is complete, the browser doesn’t know that you are hovered over the anchor. There is a quick jQuery fix for this:

$('#nav li')
	//Indicate to user that the <li> is now clickable
	.css('cursor','pointer')
	//Trigger click on anchor when clicking <li>
	.click(function () {
		$(this).find('> a').trigger('click');

Now your navigation will have a sweet new CSS3 transition to it.

demo // download

It wasn’t but a few years ago that I was taught the ways of js/jquery animations. Ever since then, the question has been going through my head, “Will the web community make JavaScript-based animations the way of the future?” What about all of the other technologies?

The Past

Before js-based animations were easy to use (via js frameworks), the prominent option out there was Flash. And boy, did everyone use it. I can personally say I never liked flash after learning it in college. As ignorant it was at the time, my reasons were “Flash is for people that don’t know how to code a site.” This was partially true, but Flash did and still does have a place in the web. Then there was the Steve Job’s initiative, and we all know, nothing gets in the way of what Steve wants. Granted, Steve has different motives for eliminating Flash than I did.

• Too bloated to work on his simple iOS devices
• A company that he is not CEO of controls the technology
• Everyone wraps their video in Flash, so video doesn’t work on his device

Then there are my motives:

• I don’t want to learn another technology
• It’s slow and bogs down my machine
• Flash is a huge security risk

Unfortunately, it took the adoption of Steve Jobs’ iPad for web sites to start thinking of alternatives for animations.

The Present

We all know that js-based animations have been around for quite awhile, but it wasn’t until frameworks like jQuery and MooTools came along, that they are much easier to implement. Now that there are easy-to-use frameworks, the learning curve for developers to learn is not quite as steep.

This takes care of a few of the points above, but not all of them. The biggest is security. After listening to the Security Now Podcast on the TWiT network, I’ve quickly learned through the teachings of Steve Gibson, that JavaScript is just as big as a security risk as Flash. Most exploits that happen on the web, are executed by js. So as a user, it is good practice to use your browser with js turned off. It doesn’t necessarily bug me that the small percentage of people disabling js in the browsers aren’t seeing my sweet animations, but more so that I’m encouraging bad security practices. This was what got me thinking, “What is the right solution for animations?”

The Future

With the increase adoption of Modern Browsers by users, it’s making more and more sense to use css3 transitions for animations.

• They still work with JS disabled
• They are arguably easier to code than js-based
• Semantically, animations should be in CSS
• The animations don’t have to run through the JavaScript engine in the browser

Flash is NOT Dead. JS-Based Animations Aren’t Dead.

In order to ruffle other peoples’ feathers, people will say things like “Flash is Dead. Use JS-Based animations,” or “JS-Based animations are dead, use css3.” The fact of the matter is none of these technologies will be “dead” anytime soon. Sure, Flash adoption went down when the iPad came out, but it didn’t go away, and it won’t. JS-Based animations won’t be any different.

Flash can still do much more than js and css3, and js can do more than css3. So pick the right tool for the job. I would love to see css3 do just as much as Flash does someday, but that simply isn’t going to happen anytime soon. Maybe not at all. I’m sure the folks over at Adobe will continue to innovate to staying ahead of these other technologies.

Feel free to let me know what you think in the comments. I’m curious to see what others are thinking about this.

If you have your own server, this might be a great option for you. The caveat is that your server will no longer see any files that have permissions 777. You can check out the installation instructions on how to do it.

The JS:

<script src="jquery.easy-autofill.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#search-form,#contact-form').autofill();
});
</script>

The html:

<form id="targeted-form">
	<fieldset>
		<legend>Contact Me</legend>
		<label class="off-screen" for="contact-form">Name</label>
		<input name="s" type="text" />
		<label class="off-screen" for="contact-form">Email</label>
		<input name="s" type="text" />
		<label class="off-screen" for="contact-form">Comment</label>
		<textarea></textarea>
		<input class="submit" type="submit" value="Submit" />
	</fieldset>
</form>

It is important to know that the text that is used for the autofill is grabbing the label tag just before the input or textarea.

See it in Action | Download files