サポート » プラグイン » ハンバーガーメニューの閉じるについて

  • 解決済 hachikuma

    (@hachikuma)


    yuuta というテーマを使っています。
    ハンバーガーメニューが最初から実装されているのですが、メニュー内のリンクをクリックしても、プルダウンされたメニューが閉じてくれません。

    なので、メニューをクリックする度に、×ボタンで閉じないといけない不便な状態です。
    これを直したいのですが、どうすればいいでしょうか?

    HTMLはこうなっています。

    <div class=”site-navigation-wrapper”>
     <nav id=”site-navigation” class=”main-navigation” role=”navigation”>
      <ul class=”primary-nav”>
       <li id=”menu-item-346″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-346″>メニュー1
       <li id=”menu-item-347″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-347″>メニュー2
       <li id=”menu-item-348″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-348″>メニュー3

     </nav>
    </div>

    よろしくお願いします。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • こんにちは

    メニュー内のリンクをクリックしても、プルダウンされたメニューが閉じてくれません。

    ページが遷移しない場合、メニューは閉じないようです。
    適当なフックや設定もないようなので、JavaScript でアンカーリンクのクリック時に閉じるボタンをクリックさせる方法はどうでしょうか?

    テーマの functions.php に、

    function my_enqueue_script() {
    	$script = <<<SCRIPT
    (function ($) {
    	$('#site-navigation a[href^="#"]').on('click', function() {
    		$('.primary-nav-trigger').trigger("click");
    	});
    }(jQuery));
    SCRIPT;
    	wp_add_inline_script( 'yuuta-scripts', $script );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
    • この返信は4 週間、 1 日前に  ishitaka さんが編集しました。

    ishitakaさん、ご回答ありがとうございます。
    functions.phpに入れてみましたが、特に変化がありませんでした。

    functions.phpの書き方がおかしいでしょうか?
    子テーマのfunctions.phpの現在の全文を掲示させていただきます。

    <?php
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }

    //SVG
    function add_file_types_to_uploads($file_types){

    $new_filetypes = array();
    $new_filetypes[‘svg’] = ‘image/svg+xml’;
    $file_types = array_merge($file_types, $new_filetypes );

    return $file_types;
    }
    add_action(‘upload_mimes’, ‘add_file_types_to_uploads’);

    function my_enqueue_script() {
    $script = <<<SCRIPT
    (function ($) {
    $(‘#site-navigation a[href^=”#”]’).on(‘click’, function() {
    $(‘.primary-nav-trigger’).trigger(“click”);
    });
    }(jQuery));
    SCRIPT;
    wp_add_inline_script( ‘yuuta-child-scripts’, $script );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_script’ );

    よろしくお願いいたします。

    $('#site-navigation a[href^="#"]').on('click', function() {

    $('#site-navigation a').on('click', function() {

    では、どうでしょうか?

    なお、このフォーラムでコードを貼り付ける場合は、コードを選択し [code] ボタンをクリック(逆クォートで囲む)してください。
    詳細は、下記ページをご覧ください。
    https://wpdocs.osdn.jp/フォーラムへようこそ#.E3.82.B3.E3.83.BC.E3.83.89.E3.81.AE.E6.8A.95.E7.A8.BF

    やってみましたが変化がありませんでした。

    codeの件、お恥ずかしい。。。
    ご指摘ありがとうございます。

    現在はこのようになっています。

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }
    
    //SVG
    function add_file_types_to_uploads($file_types){
    
        $new_filetypes = array();
        $new_filetypes['svg'] = 'image/svg+xml';
        $file_types = array_merge($file_types, $new_filetypes );
    
        return $file_types;
    }
    add_action('upload_mimes', 'add_file_types_to_uploads');
    
    function my_enqueue_script() {
    	$script = <<<SCRIPT
    (function ($) {
    	$('#site-navigation a').on('click', function() {
    		$('.primary-nav-trigger').trigger("click");
    	});
    }(jQuery));
    SCRIPT;
    	wp_add_inline_script( 'yuuta-child-scripts', $script );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
    
    CG

    (@du-bist-der-lenz)

    アンカーでリンクしているのは、フロントページであるとか、そのページ内でのセクション移動ですよね。ドロワーメニューはひとまずは隠されているのですから、他ページのリンクで良いと思ってます。

    wp_add_inline_script( 'yuuta-child-scripts', $script );

    「yuuta-child-scripts」は意図的に変更されたのでしょうか?
    JavaScript が出力されているかどうか、ページのソースを確認してみてください。

    CGさん。ご回答ありがとうございます。

    https://webkcampus.com/sample/toggle-navi-single/ng.html

    このページは、まったく関係ない他のサイトのぺーじですが、起こってる現象が同じなので参考までにご確認ください。こちらもやはりクリックしても、ハンバーガーメニューが閉じないです。

    よろしくお願いします。

    ishitakaさん。

    「yuuta-child-scripts」これは模索してるときに、変えてしまいました。
    もしかしたらChildにするのかな?って思って。すみません。

    ですが、元に戻してみましたが、変化はありませんでした。

    JavaScript が出力されてるかは、ソースの何を確認すればいいでしょうか?
    ど素人で申し訳ありません。。

    下記の JavaScript が、テーマの theme.js より後方に出力されているかどうか確認してください。

    (function ($) {
    	$('#site-navigation a[href^="#"]').on('click', function() {
    		$('.primary-nav-trigger').trigger("click");
    	});
    }(jQuery));

    テーマの theme.js というのはこれのことでしょうか?

    <script type='text/javascript' src='https://beckproject-eq.jp/wp2/wp-content/themes/yuuta/assets/js/theme.js?ver=20170212'></script>

    これより後方に

    (function ($) {
    	$('#site-navigation a[href^="#"]').on('click', function() {
    		$('.primary-nav-trigger').trigger("click");
    	});
    }(jQuery));

    の表示はありませんでした。前方にもありませんでした。
    よろしくお願いします。

    おっと、失礼しました。

    add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );

    add_action( 'wp_enqueue_scripts', 'my_enqueue_script', 11 );

    ですね。m(__)m

    ishitakaさん!凄いっす。

    見事に上手くいきました!!

    本当にありがとうございました!!!

    心より感謝申し上げます。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • このトピックに返信するにはログインが必要です。