ブートストラップにフルスクリーンモバイルナビゲーションバーを?qū)g裝するには、デフォルトのコンポーネントとカスタムスタイルを組み合わせる必要があります。 1. BootstrapのデフォルトNavbar構(gòu)造を基礎(chǔ)として使用して、レスポンシブナビゲーションバーを構(gòu)築します。 2.カスタムCSSスタイルを追加して、メニューをフル畫面をカバーし、拡張時(shí)にコンテンツを中央にカバーします。 3. HTML屬性またはJavaScriptを介してリンクをクリックした後、ナビゲーションバーを自動的に閉じることができます。 4. Z-Index、パディングトップ、トランジションアニメーション、スクロール制御などの詳細(xì)な最適化の設(shè)定に注意して、エクスペリエンスを向上させます。

ブートストラップでは、フルスクリーンのモバイルNavbarは複雑ではありませんが、デフォルトのコンポーネントといくつかのカスタムスタイルと組み合わせて実裝する必要があります。ブートストラップ自體は、レスポンシブナビゲーションバーのインフラストラクチャを提供しますが、「フルスクリーン」効果を?qū)g現(xiàn)するには、追加のCSSとJSが必要です。

1.ブートストラップのデフォルトNAVBAR構(gòu)造を使用します

まず、Bootstrapが提供するクラスと構(gòu)造を使用して、標(biāo)準(zhǔn)のレスポンシブNAVBARを構(gòu)築する必要があります。この部分は、その後の拡張の基礎(chǔ)であり、前提條件です。

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <a class = "navbar-brand" href = "＃"> logo </a>
  <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "＃fullscreennavbar">
    <span class = "navbar-togler-icon"> </span>
  </button>

  <div class = "collapse navbar-collapse" id = "fullscreennavbar">
    <ul class = "navbar-nav me-auto mb-2 mb-lg-0">
      <li class = "nav-item"> <a class = "nav-link" href = "＃"> home </a> </li>
      <li class = "nav-item"> <a class = "nav-link" href = "＃"> service </a> </li>
      <li class = "nav-item"> <a class = "nav-link" href = "＃">私たちについて</a> </li>
    </ul>
  </div>
</nav>

コードのこの部分は、ナビゲーションバーが崩壊して小さな畫面に表示されることを既に可能にすることができますが、畫面全體を埋めることはできません。

2.カスタムCSSを追加して、フルスクリーン効果を?qū)g現(xiàn)します

ナビゲーションメニューが拡張時(shí)に畫面全體を占有するために、デフォルトの.navbar-collapse動作をオーバーライドするためにいくつかの追加スタイルを追加する必要があります。

 @media（max-width：991px）{
  .navbar-collapse {
    位置：修正;
    上：0;
    左：0;
    幅：100％;
    高さ：100VH;
    背景色：白。
    Z-Index：9999;
    パディングトップ：56px; /* Navbarの高さに従って調(diào)整*/
    ディスプレイ：Flex;
    Align-Items：Center;
    justify-content：center;
  }

  .navbar-nav {
    フレックス方向：列;
    テキストアライグ：センター;
    フォントサイズ：1.5rem;
  }

  .nav-link {
    マージン：1REM 0;
  }
}

これを設(shè)定したら、モバイルデバイスのメニューボタンをクリックすると、メニューが畫面全體をカバーし、リンクを中央に配置します。

3.オプション：メニュー項(xiàng)目をクリックして、ナビゲーションバーを自動的に閉じます

一部のユーザーは、手動でクリックする代わりにリンクをクリックした後、メニューを自動的に閉じたい場合があります。次の方法で行うことができます。

• data-bs-toggle="collapse"屬性を各.nav-linkに追加します
• または、JavaScriptを介してイベントをクリックするのを聞いて、手動で非表示にします

サンプルHTML：

 <a class = "nav-link" href = "＃" data-bs-toggle = "collapse" data-bs-target = "＃fullscreennavbar.show"> home </a>

または、簡単なJSを書く：

 document.queryselectorall（'。nav-link '）。foreach（link => {
  link.addeventlistener（ 'click'、（）=> {
    const bscollapse = new bootstrap.collapse（document.getElementById（ 'FullScreennavbar'）、{
      トグル：false
    }）;
    bscollapse.hide（）;
  }）;
}）;

4.予防策と詳細(xì)の最適化

• Z-Indexは、ページのコンテンツによって不明瞭にされるのを避けるのに十分な高さでなければなりません。
• パディングトップの値は、実際のNavbarの高さに応じて設(shè)定する必要があります。そうしないと、トップコンテンツがブロックされます。
• アニメーショントランジションを追加する場合は、 transition: transform 0.3s ease; .navbar-collapseのその他の屬性。
• ページをスクロールするときは、ボディを非クロールできないようにするのが最善です。 overflow:hiddenを動的に追加できます。

基本的にそれだけです。 Bootstrapは、「フルスクリーンナビゲーション」のコンポーネントをわずかに変更していませんが、最新のWebサイトの一般的なモバイルメニューエクスペリエンスを?qū)g現(xiàn)できます。

以上がの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。