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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.