1

I'm wondering how I could change the menu in the twenty twelve theme to show the submenu items on click rather than hover?

0

Menus can be slightly confusing since there's often JS and CSS interacting with different things.

Looking at the twentytwelve theme, a quick method of achieving this would be to remove the CSS that is adding :hover display of the submenus.

In style.css you would see .main-navigation ul li:hover > ul, on line 1,567.

In your child theme, you could just remove that selector and keep the other two selectors and all the properties in tact.

That disables the :hover, but then you also need to make decisions on the behavior of the menu, submenus, and submenu submenus etc.

Do you expect the submenus with submenus to behave the same way?

Are you going to disable the top level menu item that is nested underneath?

Are you going to create a toggle next to the menu item and keep the link clickable on the parent?

Maybe a single click opens the submenu, and doubleclick takes the user to the URL?

Paired with removing the CSS from above, you could have the parent menu item simply be a custom link going to '#' and the link text whatever you want the parent item to be.

Twentytwelve already includes JS in the js/navigation.js file, which is handling toggling a focus class on the element, so everything should work for you just removing that one line of CSS and changing your menu structure up.

If this is for your own site or a controlled environment, then that might be all you need. If you don't want to change the menu structure, or want an alternative solution to handling that, you could easily use JS to prevent the links from being followed on click as well. This code would allow that to happen and you wouldn't have to mess around with your menu structure:

    ( function( $ ) {
        $( '#menu-primary' ).find( '.menu-item-has-children > a' ).on( 'click', function( e ) {
            e.preventDefault();
        });
    } )( jQuery );

If you're creating a new theme based on twentytwelve, then you should also give consideration to how others might intend to use the theme and prefer for their menus to work. You could create customizer controls to allow toggling the behavior of hover vs click and allowing parent menu items to be links etc.

EDIT:

How would your JS affect users who don't use mice though?

The best way to tell is to try it out! :P

  1. Keyboard navigation:

In testing this solution without a mouse by using my keyboard, I am able to successfully tab through the menus, submenus, and nested submenus easily. Pressing enter did not take me to the links of items that had children, but pressing enter on the final child allows the link to be opened. This seems like it works in the way that I would expect the navigation to work from a keyboard from the op's question. It probably wouldn't be harmful to rewrite the nav with aria labels to provide a better experience for users on screen readers, and allow better handling of the navigation with arrow keys if that's a concern for your site.

  1. Mobile or Touch Devices:

The click event would be the last fired for a touch click simulation. The flow through events for touch would be:

  • touchstart
  • touchmove
  • touchend
  • mouseover
  • mousemove
  • mousedown
  • mouseup
  • click

Twentytwelve is already handling the mobile menus on the touchstart event in their navigation.js, so calling preventDefault on click should still be fine to have it behave as well on mobile.

  • 1
    How would your JS affect users who don't use mice though? – Cedon Jul 21 '17 at 17:47
  • Definitely a valid question, I updated the answer with some more information about that. – Tim Elsass Jul 21 '17 at 22:25
0

The basic answer is that you need to change the menu item element to have an onclick() function rather than an onfocus() . Onfocus() is what will happen when the mouse hovers over the element. Onclick() happens when you click the element.

Where this is done depends on the theme code. You will need to dig into the theme code that creates the menu items and change the action for the menu element, which could also be inside a <form> tlement.

And, use a Child Theme, so you don't lose your changes if the main theme gets an update.

-1

You add a :focus pseudoclass to the same rule as :hover.

a:hover {
   color: red;
}

becomes

a:hover, 
a:focus {
   color: red;
}
  • Not sure you read the question. He is trying to change the action that shows the submenu from a hover to a click. That requires changing a bit of code in the theme (hopefully via a Child Theme). – Rick Hellewell Jul 21 '17 at 3:06
  • Based on what little information was given, the CSS solution sounded like what he was needing. Not to mention :hover is an established UI interaction so it's not wise to remove it completely IMO since phones/tablets and other touch devices are covered with :focus too. Also doesn't require extra code of accessibility. – Cedon Jul 21 '17 at 17:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.