HTMLとCSSを用いた応答ナビゲーションメニューバー

この記事では、簡単な応答ナビゲーションメニューバーを作成する方法をあなたと共有している.
我々はすべてのメニューバーは、ウェブサイトの重要な部分を知っている.ナビゲーションメニューは、美しさと品質のウェブサイトの決定に大きな役割を果たしている.多くのウェブサイトは現在サイドバーメニューを使用しますが、ほとんどのウェブサイトでは、ナビゲーションメニューバーを使用します.
もっとデザインしたnavigation menus using HTML and CSS コード.しかし、この場合、メニューボタンを実行するためにJavaScriptの少量を使用しました.これは非常にシンプルでシンプルなデザインです.あなたが基本的なHTMLとCSSを知っているならば、あなたはデザインを理解することができます.
以下は、デモを見て、アイデアを得ることができますYouTubeのビデオです​​どうやって作ったの?
閉じるこの動画はお気に入りから削除されています.今、私はあなたと共有する方法を完全にステップで次の手順にします.

ステップ1 :ナビゲーションの基本構造を作成する

まず、このナビゲーションバーの基本的な背景をデザインしました.もともとここでバックグラウンドで黒い色を使いました.必要に応じて他の色を使用できます.

 <nav class="navbar">

 </nav>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        font-family: sans-serif;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #151617;
        padding: 1rem 1.5rem;
    }

ステップ2：ロゴをNavbarに加える

今、私はロゴを使用しました.私は、フォントサイズを使用しました:このロゴの30 pxとカラーホワイト.

<a href="#" class="nav-logo">Mystery Code</a>

    .nav-logo {
        font-size: 30px;
        font-weight: 500;
        color: white;
    }

ステップ3：メニューのリンクを追加

ここで必要なメニュー項目を追加しました.ここでは基本的に5つのメニュー項目を追加した場合は、金額を増やすことができます.Margin-left: 3rem 各メニューを少し離れてお互いを保つために使用されています.
ここでは、メニューリンク19 pxとカラーホワイトのフロントサイズを使いました.あなたがこれらのリンクのサイズを少し増やしたいならば、あなたはここの正面のサイズを増やすことができます.

<ul class="nav-menu">
 <li class="nav-item">
   <a href="#" class="nav-link">Home</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Services</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Portfolio</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">About</a>
 </li>

 <li class="nav-item">
   <a href="#" class="nav-link">Contact</a>
 </li>
</ul>

    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-item {
        margin-left: 3rem;
    }

    .nav-link{
        font-size: 19px;

        color: white;
    }

    .nav-link:hover{
        color: #1ae5f7;
    }

ステップ4：メニューの作成ボタン

上記の基本的なメニューバーを設計しました、現在、私は対応する装置のためにそれを作ります.まず、メニューボタンを作ります.基本的に、応答デバイスの場合、メニュー項目は完全に隠され、代わりにメニューボタンが表示されます.
メニューボタンをクリックすると、完全なメニュー項目が表示されます.私はこのボタンを三行した.これは、次のHTMLコードとCSSコードを使用して構築されます.使用するwidth: 25px , height: 3px 背景色:各ラインの白.ラインは5ピクセル離れている.

<div class="hamburger">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

    .hamburger {
        display: none;
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: white;
    }

ステップ5：メニューバーをCSS

今、私は応答デバイスのためにそれを作る.この場合、ブートストラップやCSSライブラリは使用しませんでした.私はそれだけCSSを使用して応答した.

@media only screen and (max-width: 668px) {
        .nav-menu {
            position: fixed;
            left: -100%;
            top: 5rem;
            flex-direction: column;
            background-color: #3d3d3d;
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
            transition: 0.3s;

        }

        .nav-menu.active {
            left: 0;
        }

        .nav-item {
            margin: 2.5rem 0;

        }

ステップ6 :メニューボタンをクリックすると何が起こるかを決定します

次のCSSのコードは、メニューボタンにアニメーション効果を追加するために使用されている.そのメニューボタンをクリックすると、それらの3つの線が十字記号を形成するために一緒に結合します.
この場合、行番号1と番号3はangle of 45 degrees お互いに行番号2が表示されません.これにより、1つ、3つのラインが一緒に結合され、Across mark .

       .hamburger {
            display: block;
            cursor: pointer;
        }

        .hamburger.active .bar:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active .bar:nth-child(1) {
            -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
        }

        .hamburger.active .bar:nth-child(3) {
            -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
        }

ステップ7 : JavaScriptを使用してメニューボタンをアクティブにする

今、私はこれらのボタンをJavaScriptコードを使用して起動している.まず定数を3つのクラス関数の1つに設定します.はい.ハンバーガー、'.NAVメニュー'、'.NAVリンク'ハンバーガー、NavMenu、Navlink定数をそれぞれ持っている.

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
const navLink = document.querySelectorAll(".nav-link");

次に、JavaScriptを使用して、2つのメニューボタンをアクティブにします.

hamburger.addEventListener("click", mobileMenu);
navLink.forEach(n => n.addEventListener("click", closeMenu));

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

あなたが基本的なJavaScriptを知っていて、上記のJavaScript構造を理解することを望みます.あなたが問題を理解している場合は、上記のビデオチュートリアルを見ることができます.
この記事でうまくいけば、HTML CSSとJavaScriptコードを使用して簡単なナビゲーションでメニューバーを拡張する方法を説明しました.必要なソースコードをダウンロードできます.