Studioのプルダウンメニューの作り方｜ホバー型とクリック型の選び方

Studioでグローバルメニューを作っていると、「サービス」や「メニュー」にマウスを乗せたときに下層ページの一覧をふわっと表示したい、という場面が出てきます。いわゆるプルダウンメニュー（ドロップダウン）です。答えを先にお伝えすると、作り方は「子メニューのボックスを親の中に入れ子で置き、普段は隠しておいて、ホバーまたはクリックの条件で表示する」の2ステップです。特別な機能もコードも要りません。

この記事では、その2ステップを手順に分けたうえで、ホバー型とクリック型のどちらを選ぶかの判断基準と、「開かない」「途中で閉じる」「他の要素の下に隠れる」という3つのつまずきの直し方をまとめます。150名以上が参加する国内最大級のStudio学習コミュニティ「ノーコードサロン」を運営していますが、ナビまわりの相談は今でもよく届きます。その現場で繰り返し出てくる原因を中心に整理しました。

結論：プルダウンは「隠す→表示条件で出す」の2ステップ

Studioのプルダウンメニューは特別な機能というより、ボックスの表示・非表示を条件で切り替えるという基本の応用です。手順の骨格は次の2つに集約されます。

1. 構造を作る：メニュー項目（親）のボックスの中に、開いたときに出てくる子メニューのボックスを入れ子で配置する
2. 表示条件を付ける：子メニューを普段は隠しておき、「親にマウスを乗せたとき（ホバー）」または「親をクリックしたとき」に表示されるよう条件を設定する

この2ステップさえ押さえれば、見た目のデザインは自由に調整できます。逆に、構造が曖昧なまま装飾から入ると、表示が崩れたり位置がずれたりして原因を追いにくくなります。ノーコードサロンの制作現場でも、動くパーツはまず構造から組むのが定石です。ヘッダー全体の作りに不安がある場合は、先にStudioでヘッダーを固定する方法で土台を整えておくとスムーズです。

ホバー型とクリック型、どちらを選ぶか

作り始める前に決めたいのが、開き方をどちらにするかです。判断の材料を表にまとめました。

比べるところ	ホバー型（乗せて開く）	クリック型（押して開く）
向いている画面	PC	スマホ・タブレット
スマホでの動き	タッチ操作では開かない	タップで開く
開くまでの手数	マウスを乗せるだけ	1回タップ・クリックする
作るときの手間	ホバー時のスタイルを足すだけで済む	開いている・閉じているの状態を持たせる
よく使う場面	PCのグローバルナビ	ハンバーガーメニュー内のアコーディオン
注意すること	親と子の間に隙間があると閉じる	閉じる操作が分かるようにする必要がある

迷ったら、PCはホバー型・スマホはクリック型と割り切り、ブレークポイントごとに出し分けるのが確実です。ひとつのメニューで両方の操作に対応させようとすると条件が複雑になり、後から直しづらくなります。下層ページが2〜3件しかないなら、プルダウンにせずナビに並べてしまうほうが速い、という判断もあります。

方法1：ホバーで開くプルダウンメニュー（PC向け）

PCサイトで最も一般的なのが、メニュー項目にマウスを乗せると子メニューが表示されるホバー型です。マウス操作が前提のため、PC表示に向いています。

手順1：親メニューのボックスを用意する

まず、グローバルナビの中に「サービス」などの親メニューとなるボックス（テキスト＋余白）を用意します。このボックスが、後で「マウスを乗せる範囲」になります。クリック範囲を広げたいときは、テキストの周囲にパディング（内側の余白）を持たせておくと押しやすく・乗せやすくなります。余白の考え方はStudioのボックス・余白の仕組みで詳しく解説しています。

手順2：子メニュー（開くパネル）を入れ子で置く

親メニューのボックスの中に、開いたときに表示したいリンク一覧をまとめた子ボックスを配置します。この子ボックスを、通常のレイアウトに影響しないよう絶対配置（親を基準に浮かせる配置）にして、親メニューのすぐ下に来るよう位置を調整します。ここで子ボックスが親の外に出てしまうと、ホバー条件が効かなくなるため、必ず親の内側に入れておくのがポイントです。

手順3：普段は隠し、ホバー時に表示する

子ボックスを初期状態で非表示（透明度0や表示オフ）にし、親ボックスにマウスを乗せたときのコンディション（ホバー状態）で子ボックスが表示されるよう設定します。Studioでは要素の状態に応じてスタイルを切り替えられるため、「ホバー時＝子メニューを表示」という条件を作るイメージです。表示・非表示の切り替えにアニメーション（フェードやスライド）を加えると自然な動きになります。動きの付け方はStudioでのアニメーションの付け方も参考になります。

手順4：重なり順を調整する

子メニューが他の要素の下に隠れてしまう場合は、重なり順（前面・背面）を調整します。プルダウンは他のコンテンツより前面に出す必要があるため、親またはメニュー全体を前面に設定します。ヘッダーを固定している場合は、ヘッダーとメニューの重なり順もあわせて確認します。

方法2：クリックで開くプルダウンメニュー（スマホ・タブ向け）

スマホではマウスの「ホバー」という概念がありません。そのため、スマホ対応やアコーディオン的な開閉には、タップ（クリック）で開閉するトグル型が適しています。

手順1：開閉のオン・オフを条件で管理する

クリック型は「押すたびに開く・閉じるを切り替える」動きです。Studioでは、要素をクリックしたときに状態を切り替え、その状態に応じて子メニューの表示・非表示を出し分ける、という考え方で組みます。開いているときは矢印アイコンを上向き、閉じているときは下向きにするなど、状態が見た目で分かるようにすると親切です。

手順2：スマホではアコーディオン表示にする

スマホのメニューは、ハンバーガーメニューを開いた中にプルダウン（アコーディオン）を入れる構成が定番です。親項目をタップすると子項目が下に展開し、他の項目を押し下げる形にすると、限られた画面幅でも見やすくなります。ハンバーガーメニュー自体の作り方はStudioでハンバーガーメニューを作る方法で解説しているので、あわせて組み合わせてください。

手順3：PCとスマホで表示を出し分ける

PCではホバー型、スマホではクリック型と、デバイスによって最適な形が変わります。Studioはブレークポイントごとに要素の表示・非表示や配置を変えられるため、PC用メニューとスマホ用メニューを別々に用意して出し分ける方法も有効です。出し分けの考え方はStudioのレスポンシブ設定のやり方で基本から解説しています。

つまずき1：プルダウンメニューが開かない

設定したはずなのに、マウスを乗せても何も起きない。この症状でいちばん多い原因は、子メニューのボックスが親ボックスの外に置かれていることです。表示条件は「親にホバーしたとき」で効かせるため、子が親の内側にいないと条件が伝わりません。

次の順で確認すると、原因を絞り込めます。

1. レイヤー（階層）の一覧で、子メニューが親メニューの内側に入っているか見る
2. ホバーの条件を付けた要素が、意図した親ボックスになっているか確認する（テキストだけに付いていないか）
3. 子メニューの初期状態が「非表示」ではなく「透明度0」になっていないか確認する。完全に消す設定と、透明にする設定では挙動が変わります
4. プレビュー（公開状態の表示）で確認する。編集画面では動きが再現されないことがあります
5. スマホで確認していないか確認する。ホバーはマウス操作向けの機能で、タッチ操作では発火しないのが正常です

つまずき2：メニューへマウスを移す途中で閉じる

開くところまでは動くのに、子メニューの項目を押そうとすると消えてしまう。これは親メニューと子メニューの間に隙間があるときに起きます。隙間の上をマウスが通った瞬間、「どちらにも乗っていない状態」になり、ホバー条件が外れて閉じてしまうためです。

対処は、親と子を隙間なく接するように置くことです。

• 親ボックスの下端と、子メニューの上端がぴたりと接するように位置を調整する
• 見た目としてメニューを少し下げたいときは、位置をずらすのではなく、子メニュー側の上の余白（パディング）で間隔を作る。余白は子メニューの当たり判定に含まれるので、通っても閉じません
• 親メニューの下側にパディングを足して、マウスが通る帯を広げる
• フェードのアニメーションを長くしすぎない。消えるまでが遅いと、逆に「閉じない」と感じられることがあります

つまずき3：プルダウンが他の要素の下に隠れる

開いてはいるのに、下にあるセクションや画像の後ろに潜り込んで読めない。これは重なり順（前面・背面）の問題です。プルダウンは、その下にあるコンテンツより前面に出す必要があります。

• 子メニュー単体ではなく、親（またはヘッダー全体）を前面に設定する。重なり順は親どうしで先に比べられるため、子だけを前面にしても効かないことがあります
• ヘッダーを固定している場合は、ヘッダーと本文セクションの重なり順も確認する
• 動画やスライダーなど、前面に出やすい要素がすぐ下にあるときは、その要素の重なり順を下げる
• 親ボックスに「はみ出した部分を隠す」設定が付いていないか確認する。付いていると、前面に出す以前に子メニューが切れて見えなくなります

そのほかのつまずきと切り分け

上の3つ以外では、次の2つがよく出てきます。

• 表示位置がずれる：子ボックスの配置基準（どの要素を基準に浮かせているか）を確認します。基準が意図しない親になっていると位置がずれます。画面の右端にある項目では、子メニューが画面外にはみ出さないよう、右寄せで揃えるのも手です。
• スマホでホバーが効かない：ホバーはマウス向けの機能のため、スマホでは使えません。クリック型やアコーディオンに切り替えます。PC用とスマホ用でメニューを分けるのが確実です。

いずれも単体の「バグ」というより、構造の組み方に起因することがほとんどです。表示崩れ全般の切り分けはStudioのレスポンシブが崩れる原因と直し方もあわせて確認すると理解が深まります。

よくある質問

Q1プルダウンメニューはコードを書かずに作れますか？

はい、Studioではコードを書かずに作れます。ポイントは「子メニューのボックスを入れ子で置き、ホバーやクリックの条件で表示・非表示を切り替える」という構造の考え方です。特別なプラグインは不要で、標準機能の組み合わせで実装できます。

Q2PCとスマホで動きを変えたほうがいいですか？

変えたほうが扱いやすくなります。PCはマウスのホバーで開く形、スマホはタップで開くアコーディオン形が自然です。Studioはブレークポイントごとに表示を切り替えられるので、PC用とスマホ用のメニューを別に用意して出し分ける方法が確実です。

Q3ホバーすると開くのに、メニューへ移動する途中で閉じてしまいます。

親メニューと子メニューの間に隙間があると、そこでマウスが「どちらにも乗っていない状態」になり閉じてしまいます。親の下端と子メニューの上端を接するように配置し、隙間をなくすと改善します。間隔を空けて見せたいときは、位置をずらすのではなく子メニュー側の余白で作ってください。

Q4編集画面では動くのに、公開したサイトで開きません。

まずは公開後のページを、PCのブラウザで確認してください。スマホやタブレットで見ている場合、ホバー型は仕様上開きません。PCでも開かないときは、ホバーの条件が意図した親ボックスに付いているか、子メニューが親の内側にあるかを、レイヤーの階層で確かめます。

Q5プルダウンの中身をCMSの記事一覧にできますか？

Studioには、CMSのコンテンツを一覧として並べる仕組みがあります。ただしメニューの中身が増えるほど縦に長くなり、スマホで扱いづらくなります。ナビのプルダウンは手動で並べた数件にとどめ、全件は一覧ページ側で見せる構成をおすすめします。

まとめ

Studioのプルダウンメニューは、「子メニューを入れ子で隠しておき、ホバーまたはクリックの条件で表示する」という2ステップが基本です。PC向けにはホバー型、スマホ向けにはクリック（アコーディオン）型を選び、必要ならデバイスごとに出し分けます。うまく動かないときは、症状を「開かない」「途中で閉じる」「隠れる」のどれかに当てはめると、確認すべき場所が一つに絞れます。装飾より先に構造を組むことを意識して、崩れにくいメニューを作っていきましょう。

ノーコードサロンでは、こうしたナビまわりの実装相談が日々やり取りされています。ひとりで抱えずに聞ける相手がいるだけで、Studioの制作は驚くほど進みます。