asked on

single menu

i want to make this menu working using keyboard with minimum css and jquery.

http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

please help.

Scott Fell

You canuse the keydown method https://api.jquery.com/keydown/

Here is a working example http://jsbin.com/cefanazaba/1 just click a, b or p.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <script>
    $( document ).on( "keydown", function( e ) {
  e.preventDefault();
  
  if(e.which == 65) {
   alert("Apple");
  }
  if(e.which == 66) {
   alert("Banana");
  }
  if(e.which == 80) {
   alert("Pineapple");
  }
});
  </script>
  <title>JS Bin</title>
</head>
<body>
<nav class="codrops-demos">
  <a href="index.html">Apple</a>
  <a href="index2.html">Banana</a>
  <a class="current-demo" href="index3.html">Pineapple</a>
  
</nav>
</body>
</html>

Open in new window

From there you can either send somebody to a page or trigger a drop down to open.

To look up the number of the keys https://api.jquery.com/event.which/

codelevel

ASKER

the example does not work.
it needs to work using keyboard and mouse.

thanks

Scott Fell

Ah, your question only mentioned the keyboard. You can add a similar function using click instead of keypress. Or remove the line, e.preventDefault();. Then the code for whatever menu you are using will work as expected and the jquery code above will detect the keyboard press.

Maybe create an actual working example of what you want. Try getting to load on jsbin or jsfiddle.

codelevel

ASKER

using keyboard also it did not work.
can you please edit in your example itself?

Scott Fell

The example jsbin works for me. When you say it does not work you will have to be more specific.

codelevel

ASKER

using tab key and navigating, trying to activate the links and its not happening.

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial