Menu responsive Twentytwelve ne fonctionne plus… why !!!

hatfab
PHP Wordpress

Bonjour,
voilà, je travaille sur un site à base de Twentytwelve dont le menu, entre autre, est responsive. En fait, au dessous de 600px, le menu se transforme en bouton sur lequel on doit cliquer pour faire apparaitre les choix.
Mon problème est que depuis que j'ai tarvaillé sur le thème enfant (stereoptik) le bouton ne fonctionne plus. Il se transforme bien en bouton, mais il n'est plus actif. Je n'ai aucune idée d'où cela peut venir ni où chercher. Si quelqu'un pouvait me donner une piste. Merci beaucoup !

Voici le site où le menu fonctionne
Et la mise à jour où ça ne fonctionne plus

12 réponses

brokleen
Réponse acceptée

Le fichier navigations.js n'est pas le même entre les deux sites.
Remet ce code là, il y a de forte chance que le problème vienne d'ici.
( en inspectant l'event sur le boutton menu on constate que l'event click h3.menu-toggle n'existe plus)

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav )
        return;
    button = nav.getElementsByTagName( 'h3' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button )
        return;

    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }

    button.onclick = function() {
        if ( -1 == menu.className.indexOf( 'nav-menu' ) )
            menu.className = 'nav-menu';

        if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )();
Metylene
Réponse acceptée

Et bien, puisque l'évenement onclick lance ta fonction annonyme , place le alert() dans cette fonction.
Juste après cette ligne :

    button.onclick = function() {
    alert('debug Menu nav');
hatfab
Auteur

Merci, tu as raison, il semble que ce fichier ne soit pas chargé, mais il se trouve bien à sa place dans le dossier js de Twentytwelve et comporte bien tout le code que tu me mets dans ta réponse. Qu'est-ce qui s'occupe de charger ce fichier et que j'aurais pu enlever ?

hatfab
Auteur

Si je désactive mon thème enfant ça remarche. C'est quelque chose dans mon thème enfant que empêche le fichiers navigation.js de se charger. Pourtant, j'ai bien ça dans le fichier functions.php de Twentytwelve :

// Adds JavaScript for handling the navigation menu hide-and-show behavior.
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140711', true );
brokleen

Je pense avoir trouvé, tu aurais du regarder plus attentivement ! 

remplacer
button = nav.getElementsByTagName( 'button' )[0];
par
button = nav.getElementsByTagName( 'h3' )[0];

PS : le code inspector de ton navigateur est là pour t'aider il faut t'en servir !
Penses à faire des tests avant de poser une question, dans ton cas il aurait fallu faire un alert sur la fonction button.onclick.
Tu aurais compris que la fonction n'est jamais appelé = problème de selecteur.

hatfab
Auteur

Super, merci, ça marche !!
Mais dans la mesure où ce code est dans le thème Twentytwelve et qu'il est amené à être mis à jour, il faudrait peut-être que je trouve pourquoi il faut cibler le "h3" et plus "bouton" comme dans la version original. D'où ça peut venir ?

hatfab
Auteur

dans ton cas il aurait fallu faire un alert sur la fonction button.onclick.
Je ne sais pas comment on fait ça. Pas facile d'être autodidacte :)

brokleen

Attention, il faut que tu crées un nouveau thème à partir du Twentytwelve. Car si wordpress met à jour ce thème cela met à jour tes fichiers !
Duplique le dossier, renomme le, ouvre style.css et change le nom du thème. Comme ca tu seras tranquille, les maj ne risquerons pas d'écraser tes fichiers.

hatfab
Auteur

Oui merci, je vais faire ça. Et pour la question (dans ton cas il aurait fallu faire un alert sur la fonction button.onclick. ) tu pourrais m'expliquer rapidement ?

Metylene

hatfab tous les fichiers formant le thème TwentyTwelve ne passent qu'en second. Si un fichier js/script.js est présent dans ton thème, le fichier js/script.js de TwentyTwelve ne sera pas chargé.
C'est le but d'un thème enfant à vrai dire.

hatfab
Auteur

Merci Metylene, ça j'ai bien compris, sauf que je pensais que Twentytwelve était chargé en premier et que le thème enfant venait en contre-ordre de ce qui avait été chargé.
Tout ça ne me dit toujours pas comment on fait une alerte sur la fonction button.onclick. :)

brokleen 
button.onclick = function() {
    alert();
}