While reading an article on CBC’s website, I noticed they have added what seem to be newly-designed mega drop-down menus that work in an interesting kind of way.
These looked like a cool and simple thing to reproduce, so I gave it a shot and came up with something that I think works pretty nicely.
It wasn’t as simple as I thought, and I don’t think my code is the greatest, so I’m open to suggestions. I think this could form the basis for a jQuery plugin but I’ve never created a jQuery plugin so holding I’m off on that for now.
Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.
If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.
If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement. I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented.
This is the second tutorial in a series explaining how to implement Ajax “from the ground up”, so if you haven’t yet checked out the first tutorial, then please do so now, as this one will be building on code from part one.
In the first part, we learned how to create an instance of the
XMLHttpRequest object in a cross-browser fashion. In part 2, we’ll discuss the code needed to start communicating with the server. The result of this tutorial will help us send data to the server.