サポート » 使い方全般 » メニューにドロップダウン機能をつけたい

  • yoshi_pm

    (@yoshifumiyamane)


    グローバルメニューについて質問させていただきます。

    「外観>メニュー>メニュー構造」から項目を副項目設定にした場合、
    サイト上では、グローバルメニューにカーソルを合わせると、
    副項目がドロップダウンで一覧できると思うのですが、
    (例えば、メニューに「About Us」という項目があった場合、
    カーソルを合わせるとメニュー下に「経営理念」「会社概要」など出てくるイメージ)
    「外観」から設定を行っても一覧表示されませんでした。

    テーマはオリジナルなので、
    何か必要な設定をしていないのだと思うのですが、
    必要なPHPコードを書いていないのか何なのか原因がよくわかりません。

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    オリジナルのテーマということですが、現状はどのようなコードでメニューを出力していますか?
    wp_nav_menu() を使用している場合は、depth パラメータで階層数を指定することができます。
    https://wpdocs.osdn.jp/テンプレートタグ/wp_nav_menu

    yoshi_pm

    (@yoshifumiyamane)

    メッセージありがとうございます。

    コードは下記の通りです。

    <?php if (has_nav_menu(‘site-menu1’)) : ?>
    <?php wp_nav_menu(array(
    ‘theme_location’ => ‘site-menu1’,
    ‘menu_id’ => ‘site-header-nav1’,
    ‘menu_class’ => ‘menu site-header-nav menu-pc’,
    ‘container’ => false,
    ‘link_before’ => ‘<span>’,
    ‘link_after’ => ‘</span>’,
    ‘depth’ => 1,
    ));
    ?>

    表示したい副項目が2つあるので、depthを2としてみたのですが、副項目が常時表示された状態となってしまいます。
    通常は親メニューのみ表示、カーソルを合わせた時のみ子メニューが表示をされるようにしたいので、現状は親メニューのみ表示するようdepthを1にしてあります。
    cssの問題なのかな?とも思っているのですが…。

    ishitaka

    (@ishitaka)

    下記は、CSS で副項目を非表示(display: none)にして、親項目のマウスホバーで表示する場合の例です。

    #site-header-nav1 .children {
    	display: none;
    }
    #site-header-nav1 li:hover .children {
    	display: inline-block;
    }

    他にもいろいろな方法があります。また、ナビゲーションメニューは比較的大掛かりな CSS やスクリプトになるかと思います。
    ここで全てを手取り足取り説明することはできませんので、後は既存のテーマなどを参考にしてください。

    ishitaka

    (@ishitaka)

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

    yoshi_pm

    (@yoshifumiyamane)

    解説いただきありがとうございます。
    編集してみます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「メニューにドロップダウン機能をつけたい」には新たに返信することはできません。