jQuery - improve/reduce my ipod-style dropdown code! - challenge?

Question

Hi all guys!

by keeping inspiration from this

http://www.filamentgroup.com/examples/menus/ipod.php

i have maked my own from scratch cause i have needed this smarty dropdown solution for a client, but more lightweight & efficient!

so with a good cup of coffe in my hand i have maked this

DEMO: http://jsbin.com/ufuga SOURCE: http://jsbin.com/ufuga/edit

since this is a proof o concept, whould be nice to know, before port this into a plugin, what you think about it!

is good, bad or can be improved or reduced in size!?

i'm glad to share this code with you and would be nice if you want give me any feedback! ;-)

PS: work perfectly in IE6+, Firefox, Chrome, Opera and of course support the jQuery Theme Roller and have zero configuration steps!

thank you guys!

Answer 1

Looks nice.

One thing I'd say you should try to store jQuery objects in a variable if you're going to use them more than once, and try to take advantage of chaining.

Like this at the beginning of the code:

var $ipod_box = $('.ipod_select_box');      // Stored reference

$ipod_box.addClass('ui-widget-content ui-corner-all')        // Used chaining
         .find('ul:eq(0)').attr('class' , 'ipod_main_ul');

$ipod_box.find('li a:eq(0)').attr('class'...

And this:

var $ipod_box_a = $ipod_box.find('ul li a');      // Stored reference

$ipod_box_a.each( function(e) {
    $th = $(this);                     // Stored reference
    if ( $th.next().is('ul') ) {
        $th.next().attr('class','ipod_sub').hide();
...

$ipod_box_a.hover( ...

Also, in a couple of places, you use prevAll() and prevNext() together, when you could just use siblings().

Like here:

$ipod_li.siblings().hide();    // siblings() instead of prevAll() nextAll()

Also, when you first hover over a menu item, there's a little jog downward that happens. I assume this is because the hovered item is getting a border where there wasn't one before.

You may want to re-size all the menu items so they can all have a border that matches the background color. Then when you hover over one, you're just changing its color.

Looks nice overall though.