web-dev-qa-db-fra.com

Passez du survol à cliquer sur le menu Twenty Twelve

Je me demande comment je pourrais changer le menu dans le thème vingt-douze pour afficher les éléments de sous-menu par clic plutôt que de survoler?

menuscsssub-menutheme-twenty-twelve
1
mwz

Les menus peuvent être légèrement déroutants, car JS et CSS interagissent souvent avec différentes choses.

Si vous examinez le thème vingt-douze, une méthode rapide pour y parvenir serait de supprimer le code CSS ajouté: affichage en survol des sous-menus.

Dans style.css, vous verrez .main-navigation ul li: survol> ul, à la ligne 1 567 .

Dans votre thème enfant, vous pouvez simplement supprimer ce sélecteur et conserver les deux autres sélecteurs et toutes les propriétés intactes.

Cela désactive le: survol, mais vous devez également prendre des décisions sur le comportement du menu, des sous-menus, des sous-menus, etc.

Vous attendez-vous à ce que les sous-menus avec sous-menus se comportent de la même manière?

Allez-vous désactiver l'élément de menu de niveau supérieur imbriqué en dessous?

Allez-vous créer une bascule à côté de l'élément de menu et garder le lien cliquable sur le parent?

Peut-être qu’un simple clic ouvre le sous-menu et que double-clic conduit l’utilisateur à l’URL?

En association avec la suppression du code CSS ci-dessus, l'élément de menu parent peut simplement être un lien personnalisé menant à "#" et le texte du lien, quel que soit le choix de l'élément parent.

Twentytwelve inclut déjà JS dans le fichier js/navigation.js , qui gère le basculement d’une classe de focus sur l’élément. Tout devrait donc fonctionner pour vous en supprimant cette ligne CSS et en modifiant la structure de votre menu.

Si c'est pour votre propre site ou un environnement contrôlé, alors c'est peut-être tout ce dont vous avez besoin. Si vous ne souhaitez pas modifier la structure du menu ou si vous souhaitez une solution de remplacement, vous pouvez facilement utiliser JS pour éviter que les liens ne soient également suivis en un clic. Ce code permettrait que cela se produise et vous n'auriez pas à perdre votre temps avec la structure de votre menu:

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

Si vous créez un nouveau thème basé sur vingt-douze, vous devez également prendre en compte la manière dont les autres peuvent utiliser le thème et préférez que leurs menus fonctionnent. Vous pouvez créer des contrôles de personnalisation pour permettre de basculer le comportement du survol par rapport au clic et de permettre aux éléments du menu parent d'être des liens, etc.

MODIFIER:

Comment votre JS affecterait-il les utilisateurs qui n'utilisent pas de souris?

La meilleure façon de le savoir est de l'essayer! : P

  1. Navigation au clavier:

En testant cette solution sans souris à l'aide de mon clavier, je peux facilement parcourir facilement les menus, les sous-menus et les sous-menus imbriqués. Le fait d'appuyer sur entrée ne m'a pas conduit aux liens d'éléments qui avaient des enfants, mais appuyer sur entrer sur l'enfant final permet d'ouvrir le lien. Il semble que cela fonctionne de la manière attendue de la navigation à partir d'un clavier de la question de l'op. Il ne serait probablement pas préjudiciable de réécrire les étiquettes nav avec aria pour offrir une meilleure expérience aux utilisateurs de lecteurs d'écran et pour permettre une meilleure gestion de la navigation avec les touches fléchées si cela pose un problème pour votre site.

  1. Appareils mobiles ou tactiles:

L'événement de clic serait le dernier déclenché pour une simulation de clic tactile. Le déroulement des événements tactiles serait:

  • touchstart
  • toucher
  • toucher
  • passer la souris
  • déplacer la souris
  • souris vers le bas
  • mouseup
  • cliquez sur

Twentytwelve a déjà manipule les menus de son mobile dans l’événement touchstart dans son fichier navigation.js , il est donc utile d’appeler preventDefault au clic pour qu’il se comporte également sur mobile.

0
Tim Elsass

La réponse de base est que vous devez modifier l'élément d'élément de menu pour avoir une fonction onclick() plutôt qu'une onfocus(). Onfocus() est ce qui se passera lorsque la souris survolera l'élément. Onclick() se produit lorsque vous cliquez sur l'élément.

Où cela est fait dépend du code de thème. Vous aurez besoin de creuser dans le code de thème qui crée les éléments de menu et de modifier l'action pour l'élément de menu, qui peut également se trouver dans un élément <form>.

Et utilisez un thème enfant pour ne pas perdre vos modifications si le thème principal est mis à jour.

0
Rick Hellewell