Wix Studio エディタ：メニューのドロップダウンに関するトラブルシューティング
6分
この記事内
- ドロップダウンが消えたり、他の要素の後ろに隠れたりする
- マウスオーバー時に、ドロップダウンコンテナが移動したりサイズが変わったりする
- ドロップダウンが一度しか開かれない
- ドロップダウンのアイテムとサブアイテムが同じように見える
メニューのドロップダウンは、サブメニューとサイト要素（テキスト、画像など）の両方を表示できる便利な要素です。
ドロップダウンで作業している際、サイズ、位置、機能などに問題が発生した場合は、こちらの記事のトラブルシューティングを参考にしてください。
重要：
この記事では、新しいメニュー要素でのみ使用できるドロップダウンについて説明します。
ドロップダウンが消えたり、他の要素の後ろに隠れたりする
ドロップダウンメニューが、ライブサイトで他の要素の後ろに一部またはすべて隠れる場合は、ページのレイヤーの設定、またはヘッダーのオーバーフローの設定が関係している可能性があります。
この場合は、レイヤーパネルでヘッダーをページの最前面に移動させることをおすすめします。ドロップダウンがヘッダーの範囲を超えて表示される場合は、はみ出したコンテンツが表示されるよう、ヘッダーを調整することもできます。
ヘッダーを最前面に移動させる方法
をクリックします。
をクリックします。
ヘッダーのオーバーフローの設定を調整する方法
マウスオーバー時に、ドロップダウンコンテナが移動したりサイズが変わったりする
ドロップダウンコンテナに適用する幅は、「ストレッチ」、「メニューに合わせる」、または「コンテンツに合わせる」から選択することができます。
「コンテンツに合わせる」を選択すると、コンテナがドロップダウンのアイテムを「包み込む」ように表示され、アイテムに合わせて自動的にサイズが調整されます。そのため、ライブサイトで訪問者がアイテムにマウスオーバーすると、ドロップダウンコンテナが移動したり、サイズが変わったりすることがあります。
この問題を解決するには、コンテナの幅を「ストレッチ」または「メニューに合わせる」に変更することをおすすめします。
注意：
以下の手順は、横型メニューで個々のドロップダウンコンテナの幅を変更する方法です。この設定をメニュー内のすべてのドロップダウンに適用する場合は、こちらをご覧ください。
ドロップダウンコンテナの幅を変更する方法：
- エディタに移動します。
- メニューをクリックします。
- 「メニューを管理」をクリックします。
- パネル内でドロップダウンにマウスオーバーします。
- 「編集」をクリックし、ドロップダウンコンテナを開きます。
- 「レイアウト」アイコン
をクリックします。
- 「コンテナの幅」ドロップダウンから、「ストレッチ」または「カスタム」を選択します。
ドロップダウンが一度しか開かれない
エントランスアニメーションは、クライアントのサイトをインタラクティブで動きのあるものにすることができる便利な方法ですが、これをドロップダウンコンテナに適用すると問題が発生することがあります。
エントランスアニメーションは、ページの読み込み時に一度のみトリガーされます。ドロップダウンコンテナにエントランスアニメーションを設定すると、ドロップダウンコンテナがページの読み込み時にのみ開くようになります。
そのため、ドロップダウンが一度しか開かれない場合は、訪問者がクライアントのサイトを自由に移動できるよう、ドロップダウンコンテナからエントランスアニメーションを削除することをおすすめします。
エントランスアニメーションを削除する方法：
- エディタに移動します。
- メニューをクリックします。
- 「メニューを管理」をクリックします。
- パネル内でドロップダウンにマウスオーバーします。
- 「編集」をクリックし、ドロップダウンコンテナを開きます。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「アニメーションとエフェクト」タブ
をクリックします。 - エントランスアニメーションをクリックしてパネルを開きます。
- 「なし」をクリックします。
ドロップダウンのアイテムとサブアイテムが同じように見える
ドロップダウンのアイテムとサブアイテムの見た目が酷似していて、訪問者がサイト内の同じ階層であると誤解する可能性がある場合は、要素設定パネルからサブアイテムを個別にデザインすることができます。
ドロップダウンのサブアイテムをカスタマイズする方法：
- エディタに移動します。
- メニューをクリックします。
- 「メニューを管理」をクリックします。
- パネル内でドロップダウンにマウスオーバーします。
- 「編集」をクリックし、ドロップダウンコンテナを開きます。
- コンテナ内でドロップダウンメニューをクリックします。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「何をデザインしたいですか？」下で「ドロップダウンのサブアイテム」を選択します。
- サブアイテムの見た目を好みに合わせてカスタマイズします。
注意：
上記の手順は、ドロップダウンのサブアイテムを個別にカスタマイズするためのものです。メニュー内のすべてのドロップダウンに同じデザインを適用する場合は、こちらご覧ください。
メインメニューに問題がある場合：
メインメニューに問題がある場合は、こちらのトラブルシューティングに従ってください。