CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rits
Rits

Reputation: 31

Javascript for navigation menus using keyboard arrows and "enter" key

In this code I am using mouse hover for menus but now I want to navigate this menus using keyboard keys and enter keys. I want to navigate this menus using tab and on pressing enter on main menu submenu should expand, and should be navigate this submenu using up and down arrow keys

   <!DOCTYPE html>
    <html>
    <head>
    <style>
    #menu {
    width: 608px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;   
  }

    #menu ul {
    margin: 0px;
    padding: 0px;
   }

  #menu ul li {
  background-color: #666;
   float: left;
   border: 1px solid #CCC;
   position: relative;
   list-style-type: none;
  }

   #menu ul li:hover ul {
   visibility: visible;
  background-color: #333;
  }

   #menu ul li a {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 30px;
   color: #FFF;
   text-decoration: none;
   text-align: center;
   display: block;
   height: 30px;
   width: 150px;
   }

   #menu ul ul  {
   position: absolute;
   visibility: hidden;
   left: -1px;
   top: 31px;
   }

   #menu ul li:hover {
   background-color: #333;
   }

   #menu ul li ul li a:hover {
    background-color: #069;
      }

     #menu ul li a:hover {
       color: #0FF;
       }

   #leftmenu {
   position: absolute;
   left: 165px;
   top: 20px; 
   }

  #rightmenu {
  position: absolute;
  right: 164px;
  top: 20px;
  }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script>


   </script>
   </head>
   <body>


     <div id="menu">
     <ul id='leftmenu'>
       <li><a href="#" rel="submenu1">BOAT</a>
          <div id="submenu1">
     <ul>
       <li><a href='#'>Specs & Boat Plans</a></li>
       <li><a href='#'>Itineraries</a></li>
       <li><a href='#'>Exteriors</a></li>
       <li><a href='#'>Diving & Water Toys</a></li>
     </ul>
     </div>
     </li>
   </ul>
  <ul id='rightmenu'>
   <li><a href="#" rel="submenu2">LIFE ON BOARD</a>
     <ul>
        <div id="submenu2">
       <li><a href='#'>Itineraries</a></li>
       <li><a href='#'>Dining</a></li>
       <li><a href='#'>Family Fun</a></li>
       <li><a href="#">Lifelong Learning</a></li>
       <li><a href="#">The Crew</a></li>
       </ul>
  </div>
    </li>
   </ul>
 </div>
 </body>
  </html>

Upvotes: 0

Views: 7269

Answers (2)

jhyap
jhyap

Reputation: 3837

Like what TK said, you should bind the key event to the DOM

var isLeft = true;
var sub1 = document.getElementById('submenu1').getElementsByTagName('li');
var sub2 = document.getElementById('submenu2').getElementsByTagName('li');
$('body').keyup(function(e){

    if(e.which === 9){
        if (isLeft){
            setVisible(sub2, false);
            setVisible(sub1, true);
            isLeft = false;
        }else{
            setVisible(sub1, false);
            setVisible(sub2, true);
            isLeft = true;
        }
    }
})

function setVisible(x, flag){
     for (var i = 0; i < x.length; i++){
         if (flag){
              x[i].style.visibility = 'visible';  
         }else{
             x[i].style.visibility = 'hidden';  
         }

    }  
}

Here is a little Example

Upvotes: 0

Mr.TK
Mr.TK

Reputation: 1836

You have to bind keydown event and handle the keyCode from this event. Depending on event keycode You have to trigger click or do an action.

$(document).on('keydown', function(event){ 
                 // if You want to bind arrow keys only on menu 
                 // change document to selector of menu.
if  (event.keyCode === xx) {           
                   /* in place of xx arrow or enter code  
                  FULL LIST HERE: http://www.javascripter.net/faq/keycodes.htm */
      $('#selector for next or previous element here').trigger('click');
   } else if (event.keyCode === yy) {
       //   do something else
   } //etc...
});

Upvotes: 1

Related Questions