CSSドロップダウンメニュー正確な位置決め：ナビゲーションバーのドロップダウンメニューの不整合の問題を解決する

この記事の目的は、特に位置：絶対に応答的に調整できない場合、ナビゲーションバーのドロップダウンメニューの不正確な位置決めの問題を解決することを目的としています。コアソリューションは、親要素のオーバーフロープロパティとセット位置のオーバーフロープロパティを正しく管理することです。ドロップダウンメニューコンテナの相対的なポジショニングコンテキストを作成し、メディアクエリを介してモバイルディスプレイを最適化して、ドロップダウンメニューをトリガーボタンの下で任意の画面サイズで正確かつ応答的に配置できるようにします。

ドロップダウンメニューの位置決めの課題を理解してください

ドロップダウンメニューを備えたナビゲーションバーを構築するとき、開発者はしばしばトリッキーな問題に遭遇します。ドロップダウンメニューが常にトリガーボタンの下に正確に配置され、さまざまな画面サイズで良いパフォーマンスを維持することを確認する方法。一般的な問題は、位置を使用する場合、絶対に、ドロップダウンメニューはビューポートの特定の位置に固定され、親要素またはブラウザウィンドウのサイズが変更されないことです。ポジションを使用しようとすると、相対的な場合、ドロップダウンメニューは完全に消える可能性があります。これは通常、CSSボックスモデルの理解が不十分であること、配置特性、およびオーバーフロー特性との相互作用が原因です。

コアポジショニングの原則とオーバーフロー属性の影響

正確でレスポンシブなドロップダウンメニューの位置付けを実現するには、次の重要なCSS概念をマスターする必要があります。

1. 位置：相対：要素が位置に設定されている場合：相対的な場合、それは通常の位置に対して位置付けられます。さらに重要なことに、それはあらゆる子孫の位置、つまり絶対要素の位置決めコンテキストを提供します。これは、子要素が位置に設定されている場合、絶対に、その位置（上部、左、右、下など）が最新の位置に関連して計算されることを意味します。
2. 位置：絶対：要素はドキュメントストリームから分離され、最も近い位置付けられた祖先要素に対して配置されます。位置付けられた祖先要素がない場合、それは初期含有ブロック（通常は要素）に対して配置されます。
3. オーバーフロー：非表示：このプロパティは、要素の内容をトリミングして、要素の内側マージンボックスを超えないようにします。親要素にオーバーフロー：隠された要素とその子要素（特に位置の子要素：絶対）が親要素の境界を超えている場合、過剰は隠されます。これは、ドロップダウンメニューを「消える」原因となる犯人です。

解決策：レスポンシブドロップダウンメニューを作成します

ドロップダウンメニューの位置決めの問題を解決するには、元のコードに次の重要な調整を行う必要があります。

1.不必要なオーバーフローを削除：隠します

元のコードでは、.navbarと.dropdownlの両方にオーバーフロー：非表示があります。これにより、これらの親要素の外側にレンダリングするときに、ドロップダウンメニュー（.dropdown-contentl）がクリップされます。ドロップダウンメニューを自由に表示できるようにするには、これらの制限を削除する必要があります。

CSSチューニングの例：

 .navbar {
  /*オーバーフロー：非表示; *//*この行を削除*/
  バックグラウンドカラー：＃333;
  フォントファミリー：arial、helvetica、sans-serif;
  /*他のスタイルは変わらないままです*/
}

.dropdownl {
  フロート：左;
  /*オーバーフロー：非表示; *//*この行を削除*/
  位置：相対; /*追加または変更*/
}

2。ドロップダウンメニューコンテナの位置付けコンテキストを設定します

.dropdownl（ボタンとドロップダウンコンテンツを含む）を位置に設定します。このように、.dropdown-contentlの絶対的な位置は、.dropdownlに関連して配置できます。

CSSチューニングの例：

 .dropdownl {
  フロート：左;
  /*オーバーフロー：非表示; *//*削除*/
  位置：相対; /*このプロパティが存在することを確認してください*/
}

3.ドロップダウンメニューコンテンツの絶対的な位置を保ちます

.dropdown-contentlは位置を保持します：絶対と設定左：0の左端を親の左端に合わせます。 .dropdownlが位置：相対的であるため、ドロップダウンメニューはトリガーボタンの下に正確に配置されます。

CSSチューニングの例：

 .dropdown-contentl {
  表示：なし;
  位置：絶対;
  バックグラウンドカラー：＃f9f9f9;
  幅：400px;
  左：0; /*このプロパティを保持*/
  Box-shadow：0px 8px 16px 0px rgba（0、0、0、0.2）;
  z-index：1;
}

4。レスポンシブデザインの強化：モバイルターミナルセンターディスプレイ

小画面デバイスでより良いユーザーエクスペリエンスを提供するために、メディアクエリを使用して、ドロップダウンメニューの位置を調整できます。たとえば、画面幅が768px以下の場合、ドロップダウンメニューセンターを水平方向にします。

CSSチューニングの例：

 @mediaスクリーンと（max-width：768px）{
  .dropdownl {
    位置：解決しました; /*または位置：static;通常のドキュメントフローに復元してください*/
  }

  .dropdown-contentl {
    左：0;
    右：0;
    マージン左：自動;
    マージン右：自動;
    幅：90％; /*オプション：小さな画面に合うように幅を調整*/
  }
}

上記のメディアクエリで：

• 位置：Unsetは.dropdownlに適用され、小さな画面の下での位置決めコンテキストになり、コンテンツ（ドロップダウンメニューを含む）がより柔軟になります。
• 左：0;右：0;マージン左：自動;マージン右：自動;位置と組み合わせる：絶対に、要素は利用可能な空間の水平に中央に配置できます。

完全なコードの例

以下は、レスポンシブで正確なポジショニングドロップダウンメニューを実装する方法を示すHTMLおよびCSSコードを変更および最適化されています。

HTML（変更されていませんが、完全に再び）：

 


    
    <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
    <title>レスポンシブドロップダウンメニュー</title>
    <link rel="styleSheet" type="text/css" href="./%20index.css">
    
    <link rel="styleSheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-aweolese.min.css">


    <div class="navigationrow">
        <div class="navbar">
            <div> <a href="%EF%BC%83home"> one </a> </div>
            <div> <a href="%EF%BC%83news"> 2つの</a> </div>
            <div class="dropdownl">
                
                    三つ
                    <i class="fa fa-caret-down"> </i>
                
                <div class="dropdown-contentl">
                    <div class="header">
                        <h2>メニュー</h2>
                    </div>
                    <div class="row">
                        <div class="column">
                            <h3>カテゴリ1 </h3>
                            <a href="%EF%BC%83"> link 1 </a>
                            <a href="%EF%BC%83"> link 2 </a>
                            <a href="%EF%BC%83">リンク3 </a>
                        </div>
                        <div class="column">
                            <h3>カテゴリ2 </h3>
                            <a href="%EF%BC%83"> link 1 </a>
                            <a href="%EF%BC%83"> link 2 </a>
                            <a href="%EF%BC%83">リンク3 </a>
                        </div>
                        <div class="column">
                            <h3>カテゴリ3 </h3>
                            <a href="%EF%BC%83"> link 1 </a>
                            <a href="%EF%BC%83"> link 2 </a>
                            <a href="%EF%BC%83">リンク3 </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS（index.css）：

 * {
    ボックスサイズ：ボーダーボックス;
}

体 {
    マージン：0;
}

.navbar {
    /*オーバーフローを削除：非表示; */
    バックグラウンドカラー：＃333;
    フォントファミリー：arial、helvetica、sans-serif;
    ディスプレイ：グリッド; /*グリッドレイアウトを維持*/
    Grid-Template-Columns：Repeat（4、1Fr）; / *より柔軟な1frに調整 */
    Grid-Template-rows：46px;
    ボーダー：白い1pxソリッド;
}

.navbar a {
    /*フロート：左; *//*グリッドレイアウトの下でフロートは必要ありません*/
    フォントサイズ：16px;
    色：白;
    テキストアライグ：センター;
    パディング：14px 16px;
    テキスト装置：なし;
    ディスプレイ：Flex; /* Flexを使用してコンテンツを中心にします*/
    Align-Items：Center;
    justify-content：center;
}

.dropdownl {
    /*フロート：左; *//*グリッドレイアウトの下でフロートは必要ありません*/
    /*オーバーフローを削除：非表示; */
    位置：相対; /*キー：ドロップダウンメニューに位置決めコンテキストを提供*/
    ディスプレイ：Flex; /*フレックスセンターボタンを使用*/
    Align-Items：Center;
    justify-content：center;
}

.dropdownl .dropbtnl {
    フォントサイズ：16px;
    国境：なし;
    アウトライン：なし;
    色：白;
    パディング：14px 16px;
    バックグラウンドカラー：継承;
    フォント：継承;
    マージン：0;
    カーソル：ポインター; /*マウスポインタースタイルを追加*/
}

.Navbar A：ホバー、
.dropdownl：Hover .dropbtnl {
    背景色：赤;
}

.dropdown-contentl {
    表示：なし;
    位置：絶対;
    バックグラウンドカラー：＃f9f9f9;
    幅：400px;
    左：0; /* .dropdownlの左端に対する位置*/
    Box-shadow：0px 8px 16px 0px rgba（0、0、0、0.2）;
    z-index：1;
    トップ：100％; /*ドロップダウンメニューがボタンの下に表示されていることを確認してください*/
}

.dropdown-contentl .header {
    背景：赤;
    パディング：16px;
    色：白;
}

.dropdownl：Hover .Dropdown-Contentl {
    表示：ブロック;
}

/ *互いに浮かぶ3つの等しい列を作成します */
。行 {
    ディスプレイ：Flex; / * floatの代わりにFlexBoxを使用 */
}

。カラム {
    /*フロート：左; *// *float *を取り外します */
    フレックス：1; /*列を等しい幅にする*/
    幅：33.33％; /*元の幅を維持しますが、フレックス：1はより強力です*/
    パディング：10px;
    バックグラウンドカラー：#ccc;
    高さ：250px;
}

.column a {
    /*フロート：なし; *// *float *を取り外します */
    色：黒;
    パディング：16px;
    テキスト装置：なし;
    表示：ブロック;
    テキストアライグ：左;
}

.column a：hover {
    バックグラウンドカラー：#ddd;
}

/ *列の後にフロートをクリアする */
/* .ROW ::後の{ /* FlexBoxレイアウトではもはや必要ありません* /
/* コンテンツ： "";
    表示：テーブル;
    クリア：両方;
} */


/*レスポンシブ調整*/
@mediaスクリーンと（max-width：768px）{
    .navbar {
        Grid-Template-Columns：1fr; /*小さな画面の下でのナビゲーションアイテムの垂直スタッキング*/
        Grid-Template-rows：auto;
    }
    .navbar> div {
        幅：100％;
    }

    .dropdownl {
        位置：解決しました; /*ポジショニングコンテキストを削除し、ドキュメントストリームに正常に配置できるようにします*/
        幅：100％;
    }

    .dropdown-contentl {
        位置：絶対; /*はまだ絶対的なポジショニングですが、今ではビューポートまたは最も近い位置付けられた祖先に対して*/
        左：0;
        右：0;
        マージン左：自動;
        マージン右：自動;
        幅：90％; /*小さな画面に合うように幅を調整*/
        最大幅：400px; /*最大幅を制限*/
        上：自動; /*トッププロパティをリセット*/
    }
    。行 {
        フレックス方向：列; /*列は垂直に積み重ねられています*/
    }
    。カラム {
        幅：100％;
        高さ：自動; /*高度に順応性*/
    }
}

メモとベストプラクティス：

• TOP：100％ ：ドロップダウンメニューが常にボタンの下にあることを確認するには、TOP：100％を.DropDown-Contentlで明示的に設定することをお勧めします。これにより、ドロップダウンメニューの上端が親.dropdownlの下端に揃っています。
• グリッドとフレックスボックスの互換性：元のコードでは、.navbarはディスプレイ：グリッドを使用し、子要素はフロートを使用します。現代のCSSでは、一般に、グリッドや弾性レイアウトのフロートを避けることをお勧めします。これは、一貫性のない動作につながる可能性があるためです。上記の例では、フロートをフレックス関連の特性に置き換えて、グリッドレイアウトでより良い作業を行いました。
• セマンティックHTML ：たとえば、ナビゲーションバーを
• アクセシビリティ：視覚効果に加えて、ドロップダウンメニューの場合、キーボードナビゲーションとスクリーンリーダーのサポートも考慮する必要があります。たとえば、ARIA属性（Aria-Haspopup、Aria-Expanded）および適切なJavaScriptを使用してフォーカスを管理します。
• アニメーション効果：CSSトランジション属性を介してドロップダウンメニューの表示/非表示にスムーズなアニメーションエフェクトを追加して、ユーザーエクスペリエンスを向上させることができます。

要約します

ナビゲーションバーのドロップダウンメニューでの位置決めの問題を解決するために、重要なのは、CSS位置決め属性（位置：相対および位置：絶対）の共同作業メカニズムを理解することです。 [位置]を設定することで：ドロップダウンメニューコンテナの相対的な位置付けコンテキストを作成し、不必要なオーバーフローを削除する：隠されて、ドロップダウンメニューがトリガーボタンの下に正確に配置されるようにすることができます。同時に、メディアクエリと組み合わせてレスポンシブレイアウトが実現され、さまざまなデバイスのユーザーに一貫したフレンドリーなインタラクティブエクスペリエンスを提供できます。これらの原則に従って、堅牢で手入れの行き届いやすいプルダウンメニューコンポーネントを構築できます。

以上がCSSドロップダウンメニュー正確な位置決め：ナビゲーションバーのドロップダウンメニューの不整合の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。