navigate up and down with keybaord within html menu

Question

could some one please integrate my code with keyboard arrows to navigate the menu up and down with less code as possible. i've tried some plugins and searched alot but my little experience does not help me!

$(function() {
$('ul.nav a').each(function(i, elem) {
$(elem).bind('click', function(event) {
    event.preventDefault();
    var offset = i * 38;
    $('ul.nav').stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 2000,'easeOutQuart');

    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 2000,'easeOutQuart');
        $('ul.nav a').css({'cursor': 'pointer', 'color': '#643D21'});
        $anchor.css({'cursor': 'default', 'color': '#995D32'});
    event.preventDefault();
});
});
});

HTML code

<ul class="nav">
<li><a href="#what">what</a></li>
<li><a href="#who">who</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contact">contact</a></li>

appreciated,

Answer 1

UPDATE: Why don't I just give you the whole thing? http://jsfiddle.net/MwMt3/2

$(function() {
    var hgt = $('ul li:first').height();

    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * hgt;
            animate_bg(offset);

            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 800);
            $('ul.nav a').css({
                'cursor': 'pointer',
                'color': '#643D21'
            });
            $anchor.css({
                'cursor': 'default',
                'color': '#995D32'
            });
            event.preventDefault();
        });
    });

    $(document).keydown(function(e) {
        var bgtop = parseInt($('ul.nav').css("backgroundPosition").split(" ")[1], 10);
        var sel = Math.ceil(bgtop / hgt);
        if (e.keyCode == 39 || e.keyCode == 40) { // right, down
            if (sel < 0) {
                animate_bg(0);
            } else if (sel < $('ul.nav li').length - 1) {
                var offset = (sel + 1) * hgt;
                animate_bg(offset);
            }
        } else if (e.keyCode == 37 || e.keyCode == 38) { // left, up
            if (sel < 0) {
                var maxoffset = $('ul.nav li').length * hgt;
                animate_bg(maxoffset);
            } else if (sel > 0) {
                var offset = (sel - 1) * hgt;
                animate_bg(offset);
            }
        }
    });
});

function animate_bg(offset) {
    $('ul.nav').stop().animate({
        backgroundPosition: '0 ' + offset + 'px'
    }, 800);
}

Answer 2

It would help if you could describe a bit more clearly what you mean by "navigate the menu up and down", but here's my interpretation: http://jsfiddle.net/ebiewener/NknCW/2/

We essentially just bind the keydown event to the page and check if either of the keys pressed were the up or down arrow:

$(function(){
    $(document).keydown(function(e){
        if(e.which === 38){ //up
            var currentLI = $('li.selected');
            var currentLIprev = currentLI.prev();
            if(currentLI.length > 0 && currentLIprev.length > 0){
                currentLI.removeClass('selected');
                currentLIprev.addClass('selected');
            }else{
                $('li:first').addClass('selected');
            }
        }else if(e.which === 40){ //down
            var currentLI = $('li.selected');
            var currentLInext = currentLI.next();
            if(currentLI.length > 0){
                if(currentLInext.length > 0){
                    currentLI.removeClass('selected');
                    currentLInext.addClass('selected');
                }
            }else{
                $('li:first').addClass('selected');
            }
        }
    });
});