How can I navigation up and down a ul using two buttons?

Question

I have a simple ul and need to be able to navigate up and down the different li, using a up and down button. That way when the up button is clicked and will select each li, until it gets to the top of the ul and then you can press the down button to navigate back down, selecting the next li, each time the button is clicked.

Not sure how to go about this...

    <div id="MainMenu">
        <ul>
            <li><a href="#">PATIENT TEST</a></li>
            <li><a href="#">QC TEST</a></li>
            <li><a href="#">REVIEW RESULTS</a></li>
            <li><a href="#">OTHER</a></li>
        </ul>
    </div>

I'm using the following jQuery code to switch the class for the active li...

 $("li:not(.active)").live("click", function() {
    $(this).addClass("menuActive");
    $(this).siblings().removeClass("menuActive");
});

Answer 1

Probably something like this:

Demo http://jsfiddle.net/Us4q9/3/

<div id="MainMenu">
    <ul>
        <li class="active"><a href="#">PATIENT TEST</a></li>
        <li><a href="#">QC TEST</a></li>
        <li><a href="#">REVIEW RESULTS</a></li>
        <li><a href="#">OTHER</a></li>
    </ul>
</div>
<a href="#" id="btnUp">Up</a>
<a href="#" id="btnDown">Down</a>


 $(document).ready(function () {
        $('#btnDown').click(function () {
            var $current = $('#MainMenu ul li.active');
            if ($current.next().length > 0) {
                $('#MainMenu ul li').removeClass('active');
                $current.next().addClass('active');
            }
        });

        $('#btnUp').click(function () {
            var $current = $('#MainMenu ul li.active');
            if ($current.prev().length > 0) {
                $('#MainMenu ul li').removeClass('active');
                $current.prev().addClass('active');
            }
        });
    });

Or using keyboard navigation:

  $(window).keyup(function (e) {
            var $current = $('#MainMenu ul li.active');
            var $next;
            if (e.keyCode == 38)
                $next = $current.prev();
            if (e.keyCode == 40)
                $next = $current.next();

            if ($next.length > 0) {
                $('#MainMenu ul li').removeClass('active');
                $next.addClass('active');
            }
        });

Answer 2

Use a keydown listener and use keycodes 38 and 40 for up and down arrows.

$(document).keydown( function(e) {
    var keyCode = e.keyCode || e.which;
    if ( keyCode === 38 ) {
        // up arrow pressed
    } else if ( keyCode === 40 ) {
        // down arrow pressed
    }
});

Answer 3

Try this. (You will need to click the body first for it to work).

var selid=0;
var numlis =$("#MainMenu > ul > li").length;
$(licn(0)).addClass("menuActive");
$("li:not(.active)").live("click", function() {
    $(this).addClass("menuActive");
    $(this).siblings().removeClass("menuActive");
});

$("body").live("keydown",function(e) {
    if(e.which==38)
    {
        changeSel(-1);
    }
    else if(e.which==40)
    {
        changeSel(1);
    }
});
function licn(n)
{
    return "#MainMenu > ul > li:nth-child("+(n+1)+")";
}
function changeSel(dir)
{
    $(licn(selid)).removeClass("menuActive");
    selid+=dir;
    selid%=numlis;
    if(selid<0)
    {
        selid+=numlis;
    }
    $(licn(selid)).addClass("menuActive");
}