敏感なbulma.ナビバー

それで、あなたは敏感なNAVバーが欲しいです?よく、あなたは適切な場所に来ている!
Navバーは、どんなウェブサイトの最も一般的に使われている特徴のうちの1つでもあるので、1つを造る方法を知っていて、少なくとも資源に行く方法を知っていることは良い考えです.このチュートリアルでは、bulmaを使用して応答ナビをビルドする方法を紹介します.入出力ライブラリ.

ステップ1
Bulmaスタイルシートへのリンクをドキュメントの先頭にインポートします.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

ステップ2
ビルドNavbarの内部構造.

<!-- step 1.1 -->
<nav class="navbar" id="my-nav" role="navigation"> 
    <!-- step 1.2 -->
    <div class="navbar-menu">
        <!-- step 1.3 -->
        <div class="navbar-start">
            <!-- step 1.4 -->
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <a class="navbar-item">navbaritem</a>
            <!-- step 1.5 -->
            <div class="navbar-item has-dropdown is-hoverable">
                <!-- step 1.6 -->
                <p class="navbar-link">more</p>
                <!-- step 1.7 -->
                <div class="navbar-dropdown">
                    <a class="navbar-item">navbaritem</a>
                    <a class="navbar-item">navbaritem</a>
                </div>
            </div>
        </div>
    </div>
</nav>

上記のことを簡単に説明します.

Navbarのクラス(Bulmaによって提供される)を持つNAV要素は、我々が我々の要素の残りを格納するNavbarコンテナをつくります

div機知は、Nagbarメニューのbulmaクラスが私たちに反応性のいくらかを与えます、したがって、この窓が証明のサイズに縮小するとき、Navbarは消えます

Nubar Startのbulmaクラスによるdivは、我々のためにフレックスボックスを作成することによって、我々のNavbar項目を合わせます

リンクタグを入れていますが、ここでは多くの異なる要素を置くことができます.Navbar Item bulmaクラスはUXをインポートするOnMouseOver効果を追加します

次の手順は省略可能ですが、Navbarにドロップダウンメニューを追加する場合は、これを行うことができます.このdivに適用される2つの新しいbulmaのクラスがあります、最初のものはそれ自身の上でDropdownを持っています、しかし、ステップ7と対になったとき、それは私たちに働く低下を与えます.番目は、マウスがそれより上にあるとき、我々がハイライトを作成したdivを作るIS HOVERableクラスです

クラスNavbarリンクを持つPタグは、シェブロンを作成し、これをドロップダウンmanuで区別するためにテキストを追加します

NavbarドロップダウンBulmaクラスを持つdivは、それの中に含まれるNavbar項目を隠します

今我々はデスクトップフレンドリーなNavbarを今すぐモバイルフレンドリーにすることができます!

ステップ3
今、我々はHTMLのもう一つの塊を我々に加えますnav 要素.
HTMLでアプリケーションを構築しているなら、コードは次のようになります.

<a role="button" id="burger" class="navbar-burger">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
</a>

「Navbarバーガー」の上のクラスはナバホをつくります、そして、3つのスパンはハンバーガーで3つの線を表示するために必要です

今我々が我々のブラウザーに入って、ウインドウを縮小するならば、我々はNavbar項目が消えるのを見なければなりません、そして、ハンバーガーが右の上で再出現するのを見てください、涼しい!ボタンをクリックすると、何も起こらない!

ステップ4
あなたがステップ4.5にスキップ反応アプリを構築している場合
このステップは、上記のハンバーガーメニューのビューをトグルし、HTMLファイルにリンクするために必要なJavaScriptロジックで構成されます.
最初に、私たちは私のHTMLの要素を私のNavとBurgerのタグで捜していて、変数にそれらを保存しています、そして、その後、我々がユーザーがクリックするとき、我々がメニュー・クリックのために聞くイベント・リスナーを加えて、それからコンマの後に来るコールバック機能を実行するとき、現れるメニューが必要です.コールバック関数の内部では、私のNavaとBurger要素の両方にクラスを追加する必要があります.これは特に2つの間でトグルする必要がありますので、ドキュメント内のクラスのリストを取得し、トグルメソッドを追加する必要があります.jsのトグルメソッドは与えられた引数の存在を検索し、引数が存在する場合は削除します.

const myNav = document.querySelector("#my-nav")
const burger = document.querySelector("#burger")
burger.addEventListener('click', ()=> {
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
})

ステップ4.5 -反応バーガー
あなたが反応して以下に従っているならば、これをA要素に加えてくださいonClick={toggleDropdown}さて、この関数を宣言し、いくつかのロジックを入れて、Navbarコンポーネントに次のコードを挿入します

function toggleDropdown() {
    const myNav = document.querySelector("#my-nav")
    const burger = document.querySelector("#burger")
    myNav.classList.toggle("is-active")
    burger.classList.toggle("is-active")
}

上記のコードのスニペットは、ステップ4で説明したのと同じロジックを実行し、機能的なレスポンスのNAVバーを持つ必要があります!