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.
codelevelAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>using tab key and navigating, trying to activate the links and its not happening.

This is your question
i want to make this menu working using keyboard with minimum css and jquery.

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

please help.


This may be very clear in your own mind what this means, but not in others.   You are going to have to be specific.   What is supposed to happen when the "a" key is pressed, when the "tab" key is pressed, when "any" key is pressed,

>can you please edit in your example itself?
The goal here is to help you where you are stuck and not write the entire code for you.  If you look at the html I used it is exactly the same as the sample code.
<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>

Open in new window

I added the css http://jsbin.com/rolayaqoze/1/edit?html,output

If you look at the jquery code, I am demonstrating how to assign a specific key to some function you want.
 $( 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");
  }
});

Open in new window

To make your own key assignments, I have pointed out the link https://api.jquery.com/event.which/ that will help you determine the number for any selected key.

I commented out the line,  e.preventDefault(); by adding two slashes in front.  This will allow the mouse click to work

If you find that the "a", "b" or "p" key are not working as expected in the jsbin example, try using this link instead http://jsbin.com/rolayaqoze/1/  To go to the code in that bin, click the, "Edit In Jsbin" button on the top right of the browser.

Notice that clicking on any key except for the "a", "b" or "p" will do nothing.  This is because we only are listening for those 3 keys.  

The tab key on jsbin will probably not work as expected unless you are viewing just the output on http://jsbin.com/rolayaqoze/1/.  If that is still not working, try copying the code to your local computer or web server and you can see you can tab from one link to the other.  

Your next step is to apply this to how you are actually going to use this. If you need help on something specific, make a sample page with your code and upload it to a public url for us to look at in a new question.  The main reason things do not work as expected when it comes to javascript is because of some other html or js error.  The way to get a clue to the error is using the browsers console.  https://developer.chrome.com/devtools/docs/console  https://developer.mozilla.org/en-US/docs/Tools/Debugger  All the browsers have this feature.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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/
0
 
codelevelAuthor Commented:
the example does not work.
it needs to work using keyboard and mouse.

thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
codelevelAuthor Commented:
using keyboard also it did not work.
can you please edit in your example itself?
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The example jsbin works for me.  When you say it does not work you will have to be more specific.
0
 
codelevelAuthor Commented:
using tab key and navigating, trying to activate the links and its not happening.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.