1) Menus need to expand when you’re on a page
2) Ability to click the top level item
3) Arrows indicating drop state.
4) Degrades for users with no Java

Here’s my final code.  Please do refer to Wes’ Post for the full details.

CSS


div#navigation .displayMe { display:block; }
div#navigation ul {margin:10px 0 0; padding:0 10px 0 20px; list-style:none;}
div#navigation .downarrow {margin:0 0 0 -12px; display:inline-block; width:14px; height:14px; background:url('http://www.prolumina.net/wordpress/wp-content/themes/prolumina/images/arrowsprite.jpg') 0 2px no-repeat;}
div#navigation .down {background:url('http://www.prolumina.net/wordpress/wp-content/themes/prolumina/images/arrowsprite.jpg') 0 -11px no-repeat;}
div#navigation ul li a {font-size:14px;}
div#navigation ul ul {margin: 0; padding:0 10px 0 15px}
div#navigation ul li {margin:4px 0;}
div#navigation ul ul a {font-size:12px;}


Java

jQuery(document).ready(function() {

//Hide the submenus
jQuery('#navigation ul li ul').hide();

//If its a page parent (based off wordpress), add the class "displayMe"
//This way the accordion will be opened up on the page you are on.
if (jQuery('#navigation ul li').hasClass("current_page_parent")) {
jQuery('#navigation .current_page_parent ul').addClass("displayMe");
jQuery('#navigation .current_page_ancestor > ul').attr('style','display:block');
jQuery('#navigation .current_page_parent > ul').attr('style','display:block');
}
jQuery('#navigation .current_page_item > ul').attr('style','display:block');

//Add a class to the parent li IF it has sub UL's
jQuery("#navigation ul li:has(ul)").addClass("theDon");

//Da henchman
jQuery("#navigation ul li ul li:has(a)").addClass("henchmen");

//Close it all out
});
});


Sprite

Download Galleria and upload it to your server, under your theme’s directory.

Call jQuery and then Galleria into your theme’s header.php (order matters, and if you already have a plugin calling jQuery you may need to do some tweaking, check your firebug console if things break):

<script src="/galleria/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/galleria/galleria-1.2.3.min.js" type="text/javascript"></script>


When putting a gallery into your post or page, flip to the HTML editor and change the shortcode to:

[gallery link="file" itemtag="div" icontag="span" captiontag="p"]

For more on the WordPress Gallery, see the codex.

Now in the footer, just before </body>:

<script type="text/javascript">
if (Galleria.IE6 != true) {
// If they're running ie6, don't even both. Otherwise, load theme
Galleria.loadTheme('<?php bloginfo('theme_url'); ?>/galleria/themes/classic/galleria.classic.js');
$('.gallery').galleria({ //These options are personal preference, see Galleria documentation
image_crop: 'height',
transition: 'fade',
thumb_crop: false,
transition_speed: 500,
data_config: function(img) {
// will extract and return image captions from the wordpress gallery source:
return  {
title: $(img).parent().next('strong').html(),
description: $(img).parent().parent().next('p').html()
};
}
});
}

</script>


You can see the 1.2 Demo or download the zip.

Live Demo or download

The end result came from combining two ideas, a smooth scrolling div and a script that injects the large container with information from the thumbnail that you click. The script I used for the basic gallery is “Javascript image gallery using mootools” by Devin R, available here

The other part is the scrolling based on mouse movement. I modified a script from Antonio Lupetti, “Using CSS and Mootools to simulate Flash horizontal navigation effect,” the original is here.

The challenges here involved integrating the structures of HTML, CSS and JavaScript that the two methods used, and making the site accessible for users with no JavaScript and for those on cellphone browsers.  Tested working in FF 2/3, IE 6/7, BlackBerry Mobile, Opera Mini.

I’ve made a simple demo for you to take a look at or download.

Let me know if you have any questions and I’ll do my best to answer them.