htmlメニュー内のkeybaordで上下にナビゲート

Question

できるだけ少ないコードでメニューを上下に移動するには、キーボードの矢印でコードを統合してください。私はいくつかのプラグインを試して、たくさんの検索をしましたが、私の小さな経験は私を助けません！

$(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コード感謝

<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> 

、

Answer 1

UPDATE：なぜ私はちょうどあなたの全体のことを与えていませんか？ 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

あなたは "メニューの上下をナビゲートする" ことで意味をより明確にビットを記述することができればそれが役立つだろう、 http://jsfiddle.net/ebiewener/NknCW/2/

私達基本的にちょうどビン：しかし、ここで私の解釈ですDのページへのKeyDownイベントにと押されたキーのいずれかが上向きまたは下向きの矢印たかどうかを確認：

$(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'); 
      } 
     } 
    }); 
});