I set out to make a simple vertical navigation much like the one featured on Yahoo’s homepage, this is the result. I’m sure the JS could be improved, what do you think. Here is my working example, please note this is very basic, with little styling.

$(document).ready(function(){

    jQuery.fx.off = true;

    var nav1 = $('#item1');
    var nav2 = $('#item2');
    var nav3 = $('#item3'); 

    var pan1 = $('#panel1');
    var pan2 = $('#panel2');
    var pan3 = $('#panel3');
    var close = $('.close-me');

    //initialize panels
	pan1.hide();
	pan2.hide();
	pan3.hide();

    nav1.hover(function(){
        //nav
        nav1.css('background-color', '#ccc');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        //panels
        pan1.show();
        pan2.hide();
        pan3.hide();
    });

    nav2.hover(function(){
        //nav
        nav2.css('background-color', '#ccc');
        nav1.css('background-color', '');
        nav3.css('background-color', '');
        //panels
        pan1.hide();
        pan2.show();
        pan3.hide();
    });

   nav3.hover(function(){
        //nav
        nav3.css('background-color', '#ccc');
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        //panels
        pan1.hide();
        pan2.hide();
        pan3.show();
    });

    close.click(function(){
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        pan1.hide();
        pan2.hide();
        pan3.hide();
    });

    $('body').dblclick(function(target){
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        pan1.hide();
        pan2.hide();
        pan3.hide();
    });

});

• BROWSE / IN TIMELINE
• « Effective Web Form Design for Landing Pages
• » Gradients in FireFox 3.6

• BROWSE / IN code css design jQuery
• « Effective Web Form Design for Landing Pages
• » Gradients in FireFox 3.6