Hamburger icon is not focusing

1

How can I give focus to the hamburger icon?

Link to my code.pen : Hamburger Menu

2

Hello there.

Could you be more specific as to what behaviour you are expecting?

Are you interested in tabindex?

3 
.hamburger span:hover {
  color: red;
}
4

Ya, I like tabindex, but how can I use it only on a hamburger icon, or if it is not possible I am thinking about color change or something…that when a user press tab it focuses on the hamburger icon and when the user press enter the menu opens.

5

But this applies the hover effect on the hamburger icon not focus effect

6

Have a read over this:

Or, click for answer:

$('.hamburger span').click( function() {
  $('.hamburger span').toggleClass('show');
  $('.menu').toggleClass('show');
});

$('span').keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        $('.hamburger span').toggleClass('show');
  $('.menu').toggleClass('show'); 
    }
});

OPTIONAL (add styling)

div > span:focus {
  color: green;
  border: solid grey 2px;
}

Hope this helps

7

Hello,
what focus ? Can u be more clear on your question ?

8

I try this but it didn’t work, I think that JQuery detects enter key only on textbox area and in the document and maybe not works for this kind of purpose. Maybe changing the hamburger icon into a button will fix the problem…?

9

It does work, but you need to tab into the hamburger icon, before clicking enter.

That is why I added the CSS, so that I could tell when the icon was in focus.

10

I was not tabbing into the hamburger icon before pressing enter, and ya it works…FINALLY! I am very thankful to you for cooperating with me and to solve this problem which I am trying to solve for so so long. You are GREAT! :slight_smile: :heart:

1 Like