I'm one of those people who completely reverted to server-side programming when confronted with the cross-browser compatability minefield in the late nineties. As part of the delusion, I convinced myself that browsers would eventually become fully object-oriented and that somehow justified my inertia. But over the past two years I have been stockpiling the JavaScript textbooks and had even started in on the basics... but let's face it, the JavaScript syntax, although flexible, is not the sexiest of creatures.
I recently introduced a JQuery menu into a website I am working on. Getting it working along with Visual Studio intellisense was a snap. It was only when I looked at the markup and the way that JQuery was interacting with the document elements that I experienced that well known "light goes on" moment.
JQuery used CSS3 (for the most part) selectors to reference the various document elements and totally abstracts away the browser incompatabilities of old. Wow! Now I blogged about JQuery before but my excitement then was mainly based on the VS intellisense available. I did not quite "get it". This library was the brainchild of John Resig and I'm now convinced that lowering the barrier to entry to this extent will bring a lot of creative server-side developers into the the RIA arena just when they are needed the most.
To get started, look at some of the basic tutorials and work through them. If you are using VS 2008 (or the Web Express version), then follow Scott Guthrie's steps for getting intellisense working in VS 2008; I installed the KB hotfix he mentions and dropped the vsdocs file into my js folder along with the JQuery library files and had no problems - very easy to do :-)
I came across a really slick menu on the Queness website and have adapted it to work with a regular ASP.NET master page. A download link to a working Web Application Project for this is provided below. The only thing I don't like is that the tab graphic has both the hover and non-hover images stacked one over the other in the same image. I would opt to change this by separating them out into separate files and update the CSS accordingly - examples of these menus are everywhere so you shouldn't have a problem with that. You can have it so that each menu tab will accomodate a text link with a different hover version. The key with this sample is making sure that the selectors in the markup match those referenced in the CSS and in the script.
Notes: JQuery Menu Sample with Master Page
* 2.0 Web Application Project Template
* Based on Queness menu but with 1.3.2 version of library and vsdocs added
* CSS and markup have been tweaked to work with master page
* Rounded corners have been commented out in markup as they looked pixelated - fixable
* Change the hover background color for vertical links by altering script default of #888
Resources
* Check the original menu along with demo here.
* Be sure to check out the JQuery UI Website!
* What every developer should know about JQuery
* JQueryMenu.zip (115.39 kb)