Navbar

功能說明

  1. 標題
  2. 分頁連結(可隨視窗大小調整)
  3. 社群媒體(可隨視窗大小調整)

何謂RWD?

  • RWD(Responsive Web Design/回應式網頁設計) : 是可讓伺服器一律向所有裝置發送相同的html程式碼之設定，並透過CSS調整網頁在裝置上的呈現方式。簡單來說，RWD能為所有裝置提供相同的程式碼，並根據螢幕尺寸，自動調整呈現方式。

CSS重點

  • 一般情況下，導覽列(Navbar)有自己的許多Class，例如 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*Navbar*/
    ...
    .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    }
    .nav-toggle {
    font-size: 1.5rem;
    color: var(--clr-primary-5);
    background: transparent;
    border-color: transparent;
    transition: var(--transition);
    cursor: pointer;
    }
    ...
  • 但透過@media screen可以去判斷，當視窗寬度大於800px時，同名的Class擁有不同的屬性，例如 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ...
    @media screen and (min-width: 800px) {
        .nav-header {
            padding: 0;
        }
        .nav-toggle {
            display: none;
        }
    ...}

HTML重點

  1. 標題與選單按鈕 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="nav-header">
        <!-- 匯入標題圖片 -->
        <img src="./logo.svg" class="logo" alt="logo"/>
        
        <!-- 當視窗寬度小於800px時，顯示選單按鈕 -->
        <button class="nav-toggle">
            <!-- 引用Font Awesome的icon -->
            <i class="fas fa-bars"></i>
        </button>
    </div>

    若想了解Font Awesome的用法介紹，可以查閱上一篇文章的內容!

  2. 選單連結 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul class="links">
        <li>
            <a href="index.html">home</a>
        </li>
        <li>
            <a href="about.html">about</a>
        </li>
        <li>
            <a href="projects.html">projects</a>
        </li>
        <li>
            <a href="contact.html">contact</a>
        </li>
    </ul>

    視窗大小呈現畫面不同，使用class="link"去做控制

  3. 社群媒體 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <ul class="social-icons">
        <li>
            <a href="https://www.facebook.com">
                <i class="fab fa-facebook"></i>
            </a>
        </li>
        <li>
            <a href="https://www.twitter.com">
                <i class="fab fa-twitter"></i>
            </a>
        </li>
        <li>
            <a href="https://www.behance.com">
                <i class="fab fa-behance"></i>
            </a>
        </li>
        <li>
            <a href="https://www.linkedin.com">
                <i class="fab fa-linkedin"></i>
            </a>
        </li>
        <li>
            <a href="https://www.sketch.com">
                <i class="fab fa-sketch"></i>
            </a>
        </li>
    </ul>

    視窗寬度大於800px時才會顯示，使用class = "social-icons"去控制

JavaScript重點

  1. 利用class="nav-toggle"去抓取選單按鈕 
    1
    const navToggle = document.querySelector(".nav-toggle");
  2. 利用class="links"去抓取選單連結 
    1
    const links = document.querySelector(".links");
  3. 將選單按鈕新增點擊事件 
    1
    2
    3
    navToggle.addEventListener("click", function () {
      links.classList.toggle("show-links");
    });
    • 使用ClassList可以使用裡面的方法新增、刪除、修改節點上的CSS類，或判斷某個節點是否被賦予了某個CSS類。例如 :
      • add : 新增CSS
      • remove : 移除CSS
      • toggle : 當元素上沒有此CSS類時，它就新增這個CSS類；如果元素已經有了這個CSS類，它就是刪除該CSS類。總之，就是反轉操作，此方法適合拿來做下拉式選單。
      • contains : 判斷某CSS類是否存在於元素中
      • length : 回傳ClassList有幾個CSS類

參考與引用來源

  1. RWD介紹
  2. @media screen介紹
  3. ClassList與其屬性介紹