Need menu to dropdown using keyboard

Need menu to dropdown using keyboard

First let me say, I'm new to jQuery and its been a while since I've done anything with Javascript.  Second, this isn't my code, I came into the project a couple of months ago and trying to figure out what goes with what.

What do I need to do so that when someone tabs into the menu it will drop down just like it does when you mouseover it?  Is this even possible?

  1. if(ie === "1") {
  2. if($(window).width() > 949) {
  3. $.fn.pause = function (a) {
  4. $(this).stop().animate({
  5. dummy: 1
  6. }, a);
  7. return this
  8. };

  10. function mouseleft() {
  11. $("#buttonbar").triggerHandler("mouseleave")
  12. }
  13. $(document).ready(function () {
  14. $("#buttonbar").mouseenter(function () {
  15. $(this).stop().pause(160).animate({
  16. height: "12.7em"
  17. }, 400, "easeOutQuart")
  18. }).mouseleave(function () {
  19. $(this).stop().pause(160).animate({
  20. height: "2.2em"
  21. }, 400, "easeOutQuart")
  22. });
  23. });
  24. $(function () {
  25. $("#accordion").accordion({
  26. fillSpace: !0,
  27. icons: {
  28. header: "accordion-header",
  29. headerSelected: "accordion-headerselected"
  30. }
  31. })
  32. });
  33. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
  34. $("#buttonbar li").bind('touchstart', function () {
  35. console.log("touch started");
  36. });
  37. $("#buttonbar li").bind('touchend', function () {
  38. console.log("touch ended");
  39. });
  40. } else {
  41. $("#accordion").accordion({
  42. active: false
  43. });
  44. }
  45. }

  47. function showElement(d) {
  48. var s = document.getElementById(d).style;
  49. if($(window).width() < 950) {
  50. if(s.display != "block") {
  51. s.display = "block";
  52. } else {
  53. s.display = "none";
  54. }
  55. if($(window).width() > 949) {
  56. if(s.display != "block") {
  57. s.display = "block";
  58. }
  59. }
  60. }
  61. }

  63. function showHide() {
  64. var s = document.getElementById("buttonbar").style;
  65. if($(window).width() > 949) {
  66. s.display = "block";
  67. document.getElementById("prospective-links").style.display = "block";
  68. document.getElementById("current-links").style.display = "block";
  69. document.getElementById("academic-links").style.display = "block";
  70. document.getElementById("facstaff-links").style.display = "block";
  71. document.getElementById("parent-links").style.display = "block";
  72. document.getElementById("alumni-links").style.display = "block";
  73. document.getElementById("visitor-links").style.display = "block";
  74. $("#accordion").accordion('destroy');
  75. $("#buttonbar").unbind('mouseenter');
  76. $("#buttonbar").unbind('mouseleave');
  77. $.fn.pause = function (a) {
  78. $(this).stop().animate({
  79. dummy: 1
  80. }, a);
  81. return this
  82. };

  84. function mouseleft() {
  85. $("#buttonbar").triggerHandler("mouseleave")
  86. }
  87. $(document).ready(function () {
  88. $("#buttonbar").mouseenter(function () {
  89. $(this).stop().pause(160).animate({
  90. height: "12.7em"
  91. }, 400, "easeOutQuart")
  92. }).mouseleave(function () {
  93. $(this).stop().pause(160).animate({
  94. height: "2.2em"
  95. }, 400, "easeOutQuart")
  96. });
  97. });
  98. $(function () {
  99. $("#accordion").accordion({
  100. fillSpace: !0,
  101. icons: {
  102. header: "accordion-header",
  103. headerSelected: "accordion-headerselected"
  104. }
  105. })
  106. });
  107. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
  108. $("#buttonbar li").bind('touchstart', function () {
  109. console.log("touch started");
  110. });
  111. $("#buttonbar li").bind('touchend', function () {
  112. console.log("touch ended");
  113. });
  114. }
  115. } else { /*$("#accordion").accordion({active:false});*/
  116. $("#accordion").accordion('destroy');
  117. $("#buttonbar").unbind('mouseenter');
  118. $("#buttonbar").unbind('mouseleave');
  119. $("#buttonbar li").unbind('touchstart');
  120. $("#buttonbar li").unbind('touchend');
  121. s.display = "none";
  122. document.getElementById("prospective-links").style.display = "none";
  123. document.getElementById("current-links").style.display = "none";
  124. document.getElementById("academic-links").style.display = "none";
  125. document.getElementById("facstaff-links").style.display = "none";
  126. document.getElementById("parent-links").style.display = "none";
  127. document.getElementById("alumni-links").style.display = "none";
  128. document.getElementById("visitor-links").style.display = "none"; /*$("#buttonbar").accordion('destroy');*/
  129. }
  130. }
  131. $(window).resize(showHide);
  132. //Run when resized 
  133. jQuery(function ($) {
  134. var path = location.pathname.substring(1);
  135. $('#nav a[href$="' + path + '"]').addClass('active');
  136. }); // This section makes the skip to anchor links such as the skip to content link work in webkit browsers like Chrome and Safari 
  137. (function (linkList, i, URI) {
  138. if( !! (URI = document.documentURI)) {
  139. URI = URI.split('#')[0];
  140. document.addEventListener("DOMContentLoaded", function () {
  141. document.removeEventListener("DOMContentLoaded", arguments.callee, false);
  142. linkList = document.links;
  143. for(i in linkList) {
  144. if( !! linkList[i].hash) {
  145. if(linkList[i].hash.match(/^#./)) {
  146. if((URI + linkList[i].hash) == linkList[i].href) {
  147. linkList[i].addEventListener("click", function (e, f, g) {
  148. f = document.getElementById(this.hash.slice(1));
  149. if(!(g = f.getAttribute('tabIndex'))) f.setAttribute('tabIndex', - 1);
  150. f.focus();
  151. if(!g) f.removeAttribute('tabIndex');
  152. }, false);
  153. }
  154. }
  155. }
  156. }
  157. }, false);
  158. }
  159. return true;
  160. })();
  161. } else {
  162. function showElement(d) {
  163. var s = document.getElementById(d).style;
  164. if(s.display != "block") {
  165. s.display = "block";
  166. } else {
  167. s.display = "none";
  168. }
  169. };
  170. }; 

  1. <div id="buttonbar">
    <ul id="bar">
      <li id="prospective" class="rightborder"><a href="#">Top Menu Item 1</a>
        <ul id="prospective-links">
          <li><a href="#">Sub Menu Item 1</a></li>
          <li><a href="#">Sub Menu Item 2</a></li>
       </ul>
      </li>
      <li id="students" class="rightborder"><a href="#">Top Menu Item 2</a>
         <ul id="current-links" id="prospective-links">
            <li><a href="#">Sub Menu Item 1</a></li>
            <li><a href="#">Sub Menu Item 2</a></li>
         </ul>
       </li>
    ............
    </ul>
    </div>















I can provide the css if needed.



[moderator reformatted]