Skip to main content

āļŠāļĢāļļāļ›āļŠāļąāđ‰āļ™ āđ† āļāđˆāļ­āļ™āđ€āļĢāļīāđˆāļĄāļ­āđˆāļēāļ™

āļŠāļģāļŦāļĢāļąāļšāđƒāļ„āļĢāļ—āļĩāđˆāđ„āļ”āđ‰āđ€āļĢāļīāđˆāļĄāļŦāļąāļ”āđ€āļ‚āļĩāļĒāļ™ web page āļŦāļĢāļ·āļ­ web application āđāļ•āđˆāļĒāļąāļ‡āļ•āļīāļ”āļ›āļąāļāļŦāļēāđ„āļĄāđˆāđāļ™āđˆāđƒāļˆāļ§āđˆāļēāļ„āļ§āļĢāļˆāļ°āļŠāļĢāđ‰āļēāļ‡ āļĢāļēāļĒāļāļēāļĢāđ€āļĄāļ™āļđ āļŦāļĢāļ·āļ­ Navigator bar āļ­āļĒāđˆāļēāļ‡āđ„āļĢāļ”āļĩ āđƒāļ™āļšāļ—āļ„āļ§āļēāļĄāļ™āļĩāđ‰ āļœāļĄāļˆāļ°āļĄāļēāđ€āļŠāļ™āļ­āļ§āļīāļ˜āļĩāļŠāļĢāđ‰āļēāļ‡ Navigator bar āļ”āđ‰āļ§āļĒ CSS āļŠāļģāļŦāļĢāļąāļš website āļ•āļąāđ‰āļ‡āđāļ•āđˆāļāļēāļĢāļŠāļĢāđ‰āļēāļ‡āđ€āļšāļ·āđ‰āļ­āļ‡āļ•āđ‰āļ™ āļˆāļ™āđ„āļ›āļ–āļķāļ‡āļ—āļģāđƒāļŦāđ‰āļ™āđ‰āļ­āļ‡ Navigator bar āļ‚āļ­āļ‡āđ€āļĢāļē

āļĢāļ­āļ‡āļĢāļąāļšāļāļēāļĢāđāļŠāļ”āļ‡āļœāļĨāđƒāļ™āļ‚āļ™āļēāļ”āļŦāļ™āđ‰āļēāļˆāļ­āļ•āđˆāļēāļ‡ āđ† āļ­āļĒāđˆāļēāļ‡āļ–āļđāļāļ•āđ‰āļ­āļ‡ (āļŦāļĢāļ·āļ­āđ€āļĢāļĩāļĒāļāļ­āļĩāļāļŠāļ·āđˆāļ­āļ§āđˆāļē Responsive) āļŦāļēāļāđƒāļ„āļĢāļ—āļĩāđˆāļĒāļąāļ‡āđ„āļĄāđˆāđāļ™āđˆāđƒāļˆāļ§āđˆāļēāļˆāļ°āđ€āļĢāļīāđˆāļĄāļˆāļēāļāļˆāļļāļ”āđ„āļŦāļ™āļ”āļĩ āļšāļ—āļ„āļ§āļēāļĄāļ™āļĩāđ‰ āļāđ‡āļˆāļ°āđ€āļ›āđ‡āļ™āļ­āļĩāļāļŦāļ™āļķāđˆāļ‡āļ•āļąāļ§āļŠāđˆāļ§āļĒ āļ—āļĩāļ—āļģāđƒāļŦāđ‰āļŠāļēāļĄāļēāļĢāļ–āđ€āļĢāļīāđˆāļĄāļŠāļĢāđ‰āļēāļ‡ Navigator bar āđƒāļ™āļĢāļ°āļ”āļąāļšāļ•āđ‰āļ™āđ„āļ”āđ‰āļ­āļĒāđˆāļēāļ‡āđāļ™āđˆāļ™āļ­āļ™ !!

āđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡ Navigator bar āđƒāļ™ HTML

āđƒāļ™āļāļēāļĢāđ€āļĢāļīāđˆāļĄāļ•āđ‰āļ™āļŠāļĢāđ‰āļēāļ‡ Navigator bar āđ€āļĢāļēāļĄāļēāļ—āļģāļ„āļ§āļēāļĄāđ€āļ‚āđ‰āļēāđƒāļˆāđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡āļ—āļĩāđˆāļˆāļģāđ€āļ›āđ‡āļ™āļāļąāļ™āļāđˆāļ­āļ™ āđ‚āļ”āļĒāļ•āļēāļĄāđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡āļžāļ·āđ‰āļ™āļāļēāļ™ HTML āļ™āļąāđ‰āļ™ Navigator bar āļˆāļ°āļĄāļĩ Tag āļ•āļēāļĄāļĄāļēāļ•āļĢāļāļēāļ™āļŠāļģāļŦāļĢāļąāļšāļˆāļąāļ”āđ€āļāđ‡āļšāļŠāđˆāļ§āļ™āļ™āļĩāđ‰ āļ™āļąāđˆāļ™āļāđ‡āļ„āļ·āļ­ Tag <nav>â€Ķ</nav> ( āļŦāļĢāļ·āļ­āđƒāļ™āļšāļēāļ‡āđ€āļ§āđ‡āļš āļāđ‡āļˆāļ°āļ­āļĒāļđāđˆāļ āļēāļĒāđƒāļ•āđ‰ Tag <header>â€Ķ</header> āļ­āļĩāļāļ—āļĩ ) āļ‹āļķāđˆāļ‡āļŠāļēāļĄāļēāļĢāļ–āļ§āļēāļ‡āđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡āļ„āļĢāđˆāļēāļ§ āđ† āđ„āļ”āđ‰ āļ”āļąāļ‡āļ™āļĩāđ‰

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>āļāļēāļĢāļŠāļĢāđ‰āļēāļ‡ Navigation Bar āļ”āđ‰āļ§āļĒ CSS</title>
  </head>
  <body>
    <header>
      <nav>
        <!-- āļžāļ·āđ‰āļ™āļ—āļĩāđˆāđ€āļ™āļ·āđ‰āļ­āļŦāļēāļ‚āļ­āļ‡ Navigation Bar -->
      </nav>
    </header>
  </body>
</html>

āđāļĨāļ°āļ™āļ­āļāļˆāļēāļāļ™āļąāđ‰āļ™ āđƒāļ™āļŠāđˆāļ§āļ™ menu āļĒāļąāļ‡āļŠāļēāļĄāļēāļĢāļ–āļ™āļģ search-box āļŦāļĢāļ·āļ­ auth-box āļĄāļēāđ„āļ§āđ‰āđƒāļ™ Tag <li> āđ„āļ”āđ‰āļ”āđ‰āļ§āļĒ āļœāđˆāļēāļ™ Tag <input /> āđāļĨāļ° Tag <button>â€Ķ </button> āļ•āļēāļĄāļĨāļģāļ”āļąāļš

āļ—āļąāđ‰āļ‡āļ™āļĩāđ‰ āļŠāļēāļĄāļēāļĢāļ–āđāļšāđˆāļ‡āļŠāđˆāļ§āļ™āļ•āđˆāļēāļ‡ āđ† āļœāđˆāļēāļ™ Tag <div>â€Ķ</div> āļžāļĢāđ‰āļ­āļ‡āļĢāļ°āļšāļļ class āļ‚āļ­āļ‡āđāļ•āđˆāļĨāļ°āļŠāđˆāļ§āļ™ āđ€āļžāļ·āđˆāļ­āļ„āļ§āļēāļĄāđ€āļ‚āđ‰āļēāđƒāļˆ āđāļĨāļ°āđ€āļĢāļĩāļĒāļāđƒāļŠāđ‰āļ‡āļēāļ™ CSS āđƒāļ™āļŦāļąāļ§āļ‚āđ‰āļ­āļ–āļąāļ”āđ„āļ›

āļ™āļ­āļāļˆāļēāļāļ™āļĩāđ‰ āđāļ™āļ°āļ™āļģāļ§āđˆāļē āđƒāļŦāđ‰āļ„āļĢāļ­āļšāđ€āļ™āļ·āđ‰āļ­āļŦāļēāļ‚āļ­āļ‡ Navigation bar āļ‚āļ­āļ‡āđ€āļĢāļēāļ”āđ‰āļ§āļĒ <div class=”container”> āđāļĨāļ° <div class=”nav-con”> āļ•āļēāļĄāļĨāļģāļ”āļąāļš āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰āļ‡āđˆāļēāļĒāļ•āđˆāļ­āļāļēāļĢāļˆāļąāļ”āļāļēāļĢāļŦāļ™āđ‰āļēāļœāđˆāļēāļ™ CSS

āļˆāļēāļāļŠāđˆāļ§āļ™āļ•āđˆāļēāļ‡ āđ† āļ‚āđ‰āļēāļ‡āļ•āđ‰āļ™āļˆāļ°āļŠāļēāļĄāļēāļĢāļ–āļŠāļĢāđ‰āļēāļ‡ HTML āđ„āļ”āđ‰ āļ”āļąāļ‡āļ™āļĩāđ‰

...
  <nav>
    <div class="container">
      <div class="nav-con">
        <div class="logo">
          <a href="#">Narbar</a>
        </div>
        <ul class="menu">
          <li><a href="#">menu#1</a></li>
          <li><a href="#">menu#2</a></li>
          <li><a href="#">menu#3</a></li>
          <li>
            <input type="text" class="nav-search-box" /><a href="">🔍</a>
          </li>
          <li>
            <div class="auth-box">
              <button class="nav-login-btn">LOGIN</button>
              <button class="nav-signup-btn">SIGNUP</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
...

āđāļĨāļ°āđ€āļĄāļ·āđˆāļ­āļ™āļģ Code HTML āđ„āļ›āļĢāļąāļ™ āļāđ‡āļˆāļ°āđ„āļ”āđ‰āļœāļĨāđ€āļ›āđ‡āļ™āđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡āļžāļ·āđ‰āļ™āļāļēāļ™ āļ”āļąāļ‡āļ™āļĩāđ‰

āđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡ Navigator bar āđ€āļšāļ·āđ‰āļ­āļ‡āļ•āđ‰āļ™āđƒāļ™ CSS

āđ€āļĢāļīāđˆāļĄāļ•āđ‰āļ™āļ”āđ‰āļ§āļĒāļāļēāļĢ āļŠāļĢāđ‰āļēāļ‡ āđāļĨāļ° import file CSS āļ‚āļ­āļ‡āđ€āļĢāļēāđ€āļ‚āđ‰āļēāļŠāļđāđˆ Code HTML āļ‚āļ­āļ‡āđ€āļĢāļēāļ”āđ‰āļ§āļĒ Tag <link /> āđƒāļ™āļŠāđˆāļ§āļ™ <head>â€Ķ</head> āļ”āļąāļ‡āļ™āļĩāđ‰

...
  <head>
    ...
    <link rel="stylesheet" href="index.css" />
  </head>
...

āļˆāļēāļ Code āđƒāļ™āļŠāđˆāļ§āļ™ (parameter) href āļˆāļ°āļ•āđ‰āļ­āļ‡āļ­āđ‰āļēāļ‡āļ­āļīāļ‡āļ–āļķāļ‡ path file āļ‚āļ­āļ‡ CSS āļ—āļĩāđˆāđ€āļĢāļēāļŠāļĢāđ‰āļēāļ‡āđ„āļ§āđ‰

āļˆāļēāļāļ™āļąāđ‰āļ™ āļ—āļĩāđˆāđ„āļŸāļĨāđŒ index.css āļ‚āļ­āļ‡āđ€āļĢāļē āļˆāļ°āđ€āļĢāļīāđˆāļĄāļˆāļēāļāļāļēāļĢ clear default web page āļ”āđ‰āļ§āļĒāļ„āļģāļŠāļąāđˆāļ‡

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

āļˆāļēāļ Code āļ‚āđ‰āļēāļ‡āļ•āđ‰āļ™ star āļŦāļĢāļ·āļ­ āđ€āļ„āļĢāļ·āđˆāļ­āļ‡āļŦāļĄāļēāļĒāļ”āļ­āļāļˆāļąāļ™āļ—āļĢāđŒ (*) āļŦāļĄāļēāļĒāļ–āļķāļ‡ Select all āļŦāļĢāļ·āļ­āļāđ‡āļ„āļ·āļ­ āđ€āļĨāļ·āļ­āļāļŠāđˆāļ§āļ™āļ›āļĢāļ°āļāļ­āļš (element) āļ‚āļ­āļ‡āļŦāļ™āđ‰āļēāđ€āļ§āđ‡āļšāļ—āļąāđ‰āļ‡āļŦāļĄāļ”āđƒāļŦāđ‰āļ—āļģāļ‡āļēāļ™ āļ”āļąāļ‡āļ™āļĩāđ‰

  • margin and padding: 0 āđ€āļžāļ·āđˆāļ­āļĨāļšāļ‚āļ­āļš default āļ—āļąāđ‰āļ‡āļŦāļĄāļ”āļ‚āļ­āļ‡āļŦāļ™āđ‰āļē
  • box-sizing: border-box āđ€āļžāļ·āđˆāļ­āļāļģāļŦāļ™āļ”āļ‚āļ™āļēāļ”āļ‚āļ­āļ‡āļāļĨāđˆāļ­āļ‡āļ—āļĩāđˆāļ„āļĢāļ­āļš element āļ•āđˆāļēāļ‡ āđ† āļ­āļĒāļđāđˆ

āđāļĨāļ°āđ€āļĄāļ·āđˆāļ­āļ™āļģ Code HTML āđ„āļ›āļĢāļąāļ™ āļ­āļĩāļāļ„āļĢāļąāđ‰āļ‡ āļāđ‡āļˆāļ°āđ„āļ”āđ‰āļœāļĨ āļ”āļąāļ‡āļ™āļĩāđ‰

āļˆāļēāļāļ™āļąāđ‰āļ™ āđ€āļ‚āđ‰āļēāļ–āļķāļ‡ class: container āļ‚āļ­āļ‡ HTML āļ‚āļ­āļ‡āđ€āļĢāļē āļžāļĢāđ‰āļ­āļĄāļāļģāļŦāļ™āļ” style āļ”āđ‰āļ§āļĒāļ„āļģāļŠāļąāđˆāļ‡

.container {
  max-width: 70vw;
  margin: 0 auto;
}

āđ‚āļ”āļĒ

  • max-width: 70vw āļŦāļĄāļēāļĒāļ–āļķāļ‡ āļāļģāļŦāļ™āļ”āđƒāļŦāđ‰ class: container āļĄāļĩāļ„āļ§āļēāļĄāļāļ§āđ‰āļēāļ‡āļŠāļđāļ‡āļŠāļļāļ”āļ—āļĩāđˆ 70% āļ‚āļ­āļ‡āļ„āļ§āļēāļĄāļāļ§āđ‰āļēāļ‡āļŦāļ™āđ‰āļēāļˆāļ­āļ›āļąāļˆāļˆāļļāļšāļąāļ™ āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰āļĄāļĩāļžāļ·āđ‰āļ™āļ—āļĩāđˆāļ§āđˆāļēāļ‡ āļĨāđ‰āļ­āļĄāļĢāļ­āļš element āļ—āļĩāđˆāļāļģāļŦāļ™āļ”
  • margin: 0 auto āļŦāļĄāļēāļĒāļ–āļķāļ‡ āđƒāļŦāđ‰ class: container āļĄāļĩāļĢāļ°āļĒāļ°āļŦāđˆāļēāļ‡ āļšāļ™āļĨāđˆāļēāļ‡ āđ€āļ›āđ‡āļ™ 0 āđāļĨāļ°āļ‹āđ‰āļēāļĒ āļ‚āļ§āļē āđ€āļ›āđ‡āļ™ auto āļ„āļ·āļ­ āđƒāļŦāđ‰āļ­āļĒāļđāđˆāļ•āļģāđāļŦāļ™āđˆāļ‡āļāļķāđˆāļ‡āļāļĨāļēāļ‡āļŦāļ™āđ‰āļēāļˆāļ­āļ™āļąāđˆāļ™āđ€āļ­āļ‡

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļēāļāļ™āļąāđ‰āļ™ āđ€āļ‚āđ‰āļēāļ–āļķāļ‡ class: nav-con āļ‚āļ­āļ‡ HTML āļ‚āļ­āļ‡āđ€āļĢāļē āļžāļĢāđ‰āļ­āļĄāļāļģāļŦāļ™āļ” style āļ”āđ‰āļ§āļĒāļ„āļģāļŠāļąāđˆāļ‡

.nav-con {
  display: flex;
  justify-content: space-between;
}

āđ‚āļ”āļĒ

  • display: flex āļŦāļĄāļēāļĒāļ–āļķāļ‡ āļāļģāļŦāļ™āļ”āđƒāļŦāđ‰ class: nav-con āļ‚āļ­āļ‡āđ€āļĢāļē āļˆāļąāļ”āļ§āļēāļ‡ element āļ āļēāļĒāđƒāļ™ āđ€āļ›āđ‡āļ™āļĨāļąāļāļĐāļ“āđŒ flex āđ‚āļ”āļĒāļĄāļĩ Defualt āđ€āļ›āđ‡āļ™ row āļ‹āļķāđˆāļ‡āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰ element āđ€āļĢāļĩāļĒāļ‡āđ€āļ›āđ‡āļ™āđāļ–āļ§āļĒāļēāļ§āđāļ™āļ§āļ™āļ­āļ™
  • justify-content: space-between āļŦāļĄāļēāļĒāļ–āļķāļ‡ āļāļģāļŦāļ™āļ”āđƒāļŦāđ‰ class: nav-con āļ‚āļ­āļ‡āđ€āļĢāļē āļ—āļĩāđˆāđ€āļ›āđ‡āļ™ flex āđāļĨāđ‰āļ§ āļĄāļĩāļŠāđˆāļ­āļ‡āļ§āđˆāļēāļ‡āļĢāļ°āļŦāļ§āđˆāļēāļ‡ element āļ—āļąāđ‰āļ‡āļŦāļĄāļ” āļ‹āļķāđˆāļ‡āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰ element āđāļĒāļāđ€āļ›āđ‡āļ™ āļŠāļīāļ”āļ‹āđ‰āļēāļĒ āđāļĨāļ°āļŠāļīāļ”āļ‚āļ§āļēāļ™āļąāđˆāļ™āđ€āļ­āļ‡

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļēāļāļ™āļąāđ‰āļ™ āđ€āļ‚āđ‰āļēāļ–āļķāļ‡ class: menu āļ‚āļ­āļ‡ HTML āļ‚āļ­āļ‡āđ€āļĢāļē āļžāļĢāđ‰āļ­āļĄāļāļģāļŦāļ™āļ” style āđƒāļŦāđ‰ display: flex āđ€āļŠāđˆāļ™āļāļąāļ™āļāļąāļš class: nav-con

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļ°āđ€āļŦāđ‡āļ™āļ§āđˆāļē āļ āļēāļĒāđƒāļ™ Tag <li> āļˆāļ°āļĄāļĩāļˆāļļāļ”āļ”āđ‰āļēāļ™āļŦāļ™āđ‰āļē āđ€āļĢāļēāļāđ‡āļ„āļ§āļĢāļˆāļ°āļ™āļģāļ­āļ­āļ āđ‚āļ”āļĒ āļāļēāļĢāđ€āļ‚āđ‰āļēāļ–āļķāļ‡ Tag <li> āđƒāļ™ class: menu āđāļĨāļ°āļāļģāļŦāļ™āļ”āļ”āļąāļ‡āļ™āļĩāđ‰

.menu li {
  list-style: none;
}

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļ°āđ€āļŦāđ‡āļ™āļ§āđˆāļē āđƒāļ™ Tag <a> āļ‚āļ­āļ‡āđ€āļĢāļē āļˆāļ°āļĄāļĩāđ€āļŠāđ‰āļ™āđƒāļ•āđ‰ āļ—āļĩāđˆāđāļŠāļ”āļ‡āđƒāļŦāđ‰āđ€āļŦāđ‡āļ™āļ§āđˆāļēāđ€āļ›āđ‡āļ™ link āđ€āļĢāļēāļāđ‡āļ„āļ§āļĢāļˆāļ°āļ™āļģāļ­āļ­āļ āđ‚āļ”āļĒ āļāļēāļĢāđ€āļ‚āđ‰āļēāļ–āļķāļ‡ Tag <a> āđƒāļ™ class: nav-con āđāļĨāļ°āļāļģāļŦāļ™āļ”āļ”āļąāļ‡āļ™āļĩāđ‰

.nav-con a {
  color: black;
  text-decoration: none;
}

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļ°āđ€āļŦāđ‡āļ™āļ§āđˆāļē āļ—āļĩāđˆāļŠāđˆāļ­āļ‡ search-box icon āđāļ§āđ‰āļ™āļ‚āļĒāļēāļĒ āļˆāļ°āļĒāļąāļ‡āļ­āļĒāļđāđˆāļ™āļ­āļāļāļĨāđˆāļ­āļ‡ āđ€āļĢāļēāļāđ‡āļˆāļ°āļˆāļąāļ”āđƒāļŦāđ‰āđ€āļ‚āđ‰āļēāđ„āļ›āđƒāļ™ search-box āļ”āđ‰āļ§āļĒ

.menu input {
  margin-right: -25px;
  padding: 10px;
  padding-right: 25px; 
  height: 25px;
}

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļŠāļļāļ”āļ—āđ‰āļēāļĒ āđ€āļĢāļēāļāđ‡āļˆāļąāļ”āļĢāļđāļ›āđāļšāļš āđāļĨāļ°āļŠāļĩāļ•āđˆāļēāļ‡ āđ† āđƒāļŦāđ‰āļŠāļ§āļĒāļ‡āļēāļĄ

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lucida Sans Unicode";
}

.container {
  max-width: 70vw;
  margin: 0 auto;
}

nav {
  background-color: #0c0c0c;
}

.nav-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.menu {
  display: flex;
}

.menu li {
  list-style: none;
  margin-left: 1rem;
}

.nav-con a {
  color: #cccccc;
  text-decoration: none;
}

.logo a {
  font-size: 1.5rem;
  font-weight: bolder;
}

.menu input {
  margin-right: -25px;
  padding: 10px;
  padding-right: 25px;
  background-color: #2e2e2e;
  border: 0px;
  border-radius: 25px;
  color: #cccccc;
  height: 25px;
}

.menu input:focus {
  border: 0px;
  outline: none;
}

.menu button {
  padding: 0 1rem;
  background-color: #2e2e2e;
  border: 0px;
  border-radius: 25px;
  color: #cccccc;
  height: 25px;
}

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āđ‚āļ„āļĢāļ‡āļŠāļĢāđ‰āļēāļ‡ Navigator bar āđƒāļ™ CSS āļŠāļģāļŦāļĢāļąāļš Responsive

āļˆāļēāļ Best Practices āļ—āļĩāđˆāļ§āđˆāļē A Mobile-first Approach to Responsive Web Design āļŦāļĢāļ·āļ­āļŦāļĄāļēāļĒāļ–āļķāļ‡ āđƒāļŦāđ‰āđ€āļĢāļīāđˆāļĄāļ­āļ­āļāđāļšāļšāđ€āļ§āđ‡āļšāđ„āļ‹āļ•āđŒāļˆāļēāļāļ‚āļ™āļēāļ”āļŦāļ™āđ‰āļēāļˆāļ­āļ—āļĩāđˆāđ€āļĨāđ‡āļāļ—āļĩāđˆāļŠāļļāļ”āļāđˆāļ­āļ™ āđāļĨāđ‰āļ§āļ„āđˆāļ­āļĒāļ‚āļĒāļēāļĒāļ‚āļķāđ‰āļ™āđ„āļ› āđ€āļĢāļēāļāđ‡āļˆāļ°āđ€āļĢāļīāđˆāļĄāļˆāļēāļāļ‚āļ™āļēāļ”āļ—āļĩāđˆāđ€āļĨāđ‡āļāļ—āļĩāđˆāļŠāļļāļ”āļ—āļĩāđˆāļ„āļ§āļēāļĄāļāļ§āđ‰āļēāļ‡ 320px āļŦāļĢāļ·āļ­āđ€āļĢāļĩāļĒāļāļ”āļđāļ‡āđˆāļēāļĒ āđ† āļ—āļĩāđˆ Chrome > F12 > Toggle device toolbar (Ctrl + Shift +M) āđāļĨāļ°āđ€āļĨāļ·āļ­āļāļ‚āļ™āļēāļ”āļŦāļ™āđ‰āļēāļˆāļ­āļ—āļĩāđˆāđ€āļĨāđ‡āļāļŠāļļāļ”āļ”āļąāļ‡āļ āļēāļž ( Mobile S – 320px )

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āđ‚āļ”āļĒāđ€āļ„āļĢāļ·āđˆāļ­āļ‡āļĄāļ·āļ­āļ™āļĩāđ‰ āļˆāļ°āļŠāđˆāļ§āļĒāđƒāļŦāđ‰āđ€āļĢāļēāđ€āļŦāđ‡āļ™ āđ€āļ§āļĨāļēāļŦāļ™āđ‰āļēāļˆāļ­āļ‚āļ­āļ‡āđ€āļĢāļē āļ­āļĒāļđāđˆāđƒāļ™āļ‚āļ™āļēāļ”āļ•āđˆāļēāļ‡ āđ† āđ„āļ”āđ‰ āđāļĨāļ°āļˆāļ°āđ€āļŦāđ‡āļ™āļ§āđˆāļē Navigator bar āļ‚āļ­āļ‡āđ€āļĢāļē āļ–āļđāļāļšāļĩāļšāļˆāļ™āļ”āļđāđ„āļĄāđˆāļ”āļĩ āđ€āļĢāļēāļāđ‡āļŠāļēāļĄāļēāļĢāļ–āļ—āļĩāđˆāļˆāļ°āļ›āļĢāļąāļšāđ„āļ”āđ‰ āļ”āđ‰āļ§āļĒāļ„āļģāļŠāļąāđˆāļ‡ CSS @media āđ‚āļ”āļĒāļˆāļ°āđ€āļĢāļīāđˆāļĄāļ—āļĩāđˆ Mobile L – 425px āđ€āļ›āđ‡āļ™

@media (max-width: 425px){
  .nav-con {
    flex-direction: column;
  }
}

āđ€āļžāļ·āđˆāļ­āļāļģāļŦāļ™āļ”āđƒāļŦāđ‰ āđ€āļĄāļ·āđˆāļ­āļ‚āļ™āļēāļ”āļŦāļ™āđ‰āļēāļˆāļ­ āļĄāļĩāļ„āļ§āļēāļĄāļāļ§āđ‰āļēāļ‡āļ—āļĩāđˆ 425px āļŦāļĢāļ·āļ­āļ™āđ‰āļ­āļĒāļāļ§āđˆāļē (āļ‹āļķāđˆāļ‡āļāđ‡āļŦāļĄāļēāļĒāļ–āļķāļ‡ āļ‚āļ™āļēāļ”āļŦāļ™āđ‰āļēāļˆāļ­āļ—āļĩāđˆāļ™āđ‰āļ­āļĒāļāļ§āđˆāļēāļ™āļĩāđ‰ āļāđ‡āļˆāļ°āđ„āļ”āđ‰āļĢāļąāļšāļœāļĨāđ„āļ›āļ”āđ‰āļ§āļĒāļžāļ­āļ”āļĩ) āđƒāļŦāđ‰ class: nav-con āļĄāļĩāļāļēāļĢāļˆāļąāļ”āđ€āļĢāļĩāļĒāļ‡ element āđ€āļ›āđ‡āļ™āđāļ™āļ§āļ•āļąāđ‰āļ‡ āđ€āļĢāļēāļāđ‡āļˆāļ°āđ„āļ”āđ‰

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļˆāļ°āđ€āļŦāđ‡āļ™āļ§āđˆāļē āļ—āļĩāđˆ class: menu āļ‚āļ­āļ‡āđ€āļĢāļē āļāđ‡āļˆāļ°āļĒāļąāļ‡āđ€āļĢāļĩāļĒāļ‡āđ€āļ›āđ‡āļ™āđāļ–āļ§āļ­āļĒāļđāđˆ āđ€āļĢāļēāļāđ‡āđƒāļŠāđˆ flex-direction: column; āļĨāļ‡āđ„āļ›āđƒāļ™ .menu āļ”āđ‰āļ§āļĒ āļžāļĢāđ‰āļ­āļĄāļ—āļąāđ‰āļ‡āļ›āļĢāļąāļšāļ„āļ§āļēāļĄāļŠāļđāļ‡ (height) āļ‚āļ­āļ‡ .nav-con āđƒāļŦāđ‰āđ€āļ›āđ‡āļ™ auto āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰āļ‚āļĒāļēāļĒāļ•āļēāļĄ class: menu āļ—āļĩāđˆāđ€āļ›āđ‡āļ™āđāļ™āļ§āļ•āļąāđ‰āļ‡ āđ€āļĢāļēāļāđ‡āļˆāļ°āđ„āļ”āđ‰

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļŠāļļāļ”āļ—āđ‰āļēāļĒ āđ€āļĢāļēāļāđ‡āļˆāļąāļ”āļ•āļģāđāļŦāļ™āđˆāļ‡āļ•āđˆāļēāļ‡ āđ† āđƒāļŦāđ‰āļŠāļ§āļĒāļ‡āļēāļĄ

@media (max-width: 425px) {
  .logo {
    margin-bottom: 1.5rem;
  }

  .nav-con {
    padding: 1.5rem 0;
    flex-direction: column;
    height: auto;
  }

  .menu {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  .menu li {
    padding: 0.5rem 0;
    margin-left: 0;
  }

  .menu input {
    width: 100%;
  }

  .menu button {
    width: 100%;
    margin: 0.5rem 0;
  }
}

āļ•āļąāļ§āļ­āļĒāđˆāļēāļ‡āļœāļĨāļĨāļąāļžāļ˜āđŒ

āļŠāļļāļ”āļ—āđ‰āļēāļĒāļāđˆāļ­āļ™āļˆāļēāļāļāļąāļ™

āļŠāļģāļŦāļĢāļąāļšāđƒāļ„āļĢ āļ—āļĩāđˆāļ­āļĒāļēāļāļ—āļģāđƒāļŦāđ‰ Navigation Bar āļ‚āļ­āļ‡āđ€āļĢāļē āļĄāļĩāļĨāļđāļāđ€āļĨāđˆāļ™āļ—āļĩāđˆāļĄāļēāļāļ‚āļķāđ‰āļ™ āđ€āļŠāđˆāļ™ āđ„āļĄāđˆāļ•āđ‰āļ­āļ‡āļāļēāļĢāđƒāļŦāđ‰āļŠāđˆāļ§āļ™ menu āļ‚āļ­āļ‡āđ€āļĢāļē āđāļŠāļ”āļ‡āļĢāļēāļĒāļāļēāļĢāļ•āļĨāļ­āļ”āđ€āļ§āļĨāļē āđƒāļ™āļˆāļļāļ”āļ™āļĩāđ‰ āđ€āļĢāļēāļāđ‡āļŠāļēāļĄāļēāļĢāļ–āļ™āļģ script āđ€āļ‚āđ‰āļēāļĄāļēāļŠāđˆāļ§āļĒāļ—āļģāđƒāļŦāđ‰āļŠāļēāļĄāļēāļĢāļ–āļāļ”āđ€āļ›āļīāļ”/ āļ›āļīāļ” menu āļ‚āļ­āļ‡āđ€āļĢāļēāđ„āļ”āđ‰āļ­āļĩāļāļ”āđ‰āļ§āļĒ āđāļ•āđˆāđƒāļ™āļ—āļĩāđˆāļ™āļĩāđ‰ āļˆāļ°āļ­āļĒāļđāđˆāļ™āļ­āļāđ€āļŦāļ™āļ·āļ­āđ€āļ™āļ·āđ‰āļ­āļŦāļēāļšāļ—āļ„āļ§āļēāļĄ āđƒāļ§āđ‰āđ‚āļ­āļāļēāļŠāļŦāļ™āđ‰āļē āļˆāļ°āđ€āļ‚āđ‰āļēāļĄāļēāļ­āļ˜āļīāļšāļēāļĒāđ€āļžāļīāđˆāļĄāđ€āļ•āļīāļĄāđƒāļ™āļˆāļļāļ”āļ™āļĩāđ‰ āļŦāļĢāļ·āļ­āļˆāļ°āļĨāļ­āļ‡āļĻāļķāļāļĐāļēāļˆāļēāļāļ‡āļēāļ™āļ—āļĩāđˆāļœāļĄāđ€āļ‚āļĩāļĒāļ™āđ„āļ§āđ‰āđ„āļ”āđ‰āļ—āļĩāđˆ https://github.com/thitipongr/Blog-Platform āđ„āļ”āđ‰āđ€āļĨāļĒāļ„āļĢāļąāļš

āļ­āđ‰āļēāļ‡āļ­āļīāļ‡

  1. āđ€āļĢāļĩāļĒāļ™āļĢāļđāđ‰āļāļēāļĢāļŠāļĢāđ‰āļēāļ‡ Navbar āļ”āđ‰āļ§āļĒ HTML & CSS āļŠāļ·āļšāļ„āđ‰āļ™āđ€āļĄāļ·āđˆāļ­ 8 āļ•āļļāļĨāļēāļ„āļĄ 2565
    āļˆāļēāļ: https://youtu.be/xFlj1miNfcs?si=nzfvf9up-xy3Xd27
  2. CSS Box sizing āļŠāļ·āļšāļ„āđ‰āļ™āđ€āļĄāļ·āđˆāļ­ 9 āļ•āļļāļĨāļēāļ„āļĄ 2565
    āļˆāļēāļ: https://www.mindphp.com/āļšāļ—āđ€āļĢāļĩāļĒāļ™āļ­āļ­āļ™āđ„āļĨāļ™āđŒ/āļšāļ—āđ€āļĢāļĩāļĒāļ™-css/6214-css_box_sizing.html
  3. Responsive Design: Best Practices and Considerations āļŠāļ·āļšāļ„āđ‰āļ™āđ€āļĄāļ·āđˆāļ­ 10 āļ•āļļāļĨāļēāļ„āļĄ 2565
    āļˆāļēāļ: https://www.toptal.com/designers/responsive/responsive-design-best-practices

āđ€āļĢāļēāđƒāļŠāđ‰āļ„āļļāļāļāļĩāđ‰āđ€āļžāļ·āđˆāļ­āļžāļąāļ’āļ™āļēāļ›āļĢāļ°āļŠāļīāļ—āļ˜āļīāļ āļēāļž āđāļĨāļ°āļ›āļĢāļ°āļŠāļšāļāļēāļĢāļ“āđŒāļ—āļĩāđˆāļ”āļĩāđƒāļ™āļāļēāļĢāđƒāļŠāđ‰āđ€āļ§āđ‡āļšāđ„āļ‹āļ•āđŒāļ‚āļ­āļ‡āļ„āļļāļ“ āļ„āļļāļ“āļŠāļēāļĄāļēāļĢāļ–āļĻāļķāļāļĐāļēāļĢāļēāļĒāļĨāļ°āđ€āļ­āļĩāļĒāļ”āđ„āļ”āđ‰āļ—āļĩāđˆ āļ™āđ‚āļĒāļšāļēāļĒāļ„āļ§āļēāļĄāđ€āļ›āđ‡āļ™āļŠāđˆāļ§āļ™āļ•āļąāļ§ āđāļĨāļ°āļŠāļēāļĄāļēāļĢāļ–āļˆāļąāļ”āļāļēāļĢāļ„āļ§āļēāļĄāđ€āļ›āđ‡āļ™āļŠāđˆāļ§āļ™āļ•āļąāļ§āđ€āļ­āļ‡āđ„āļ”āđ‰āļ‚āļ­āļ‡āļ„āļļāļ“āđ„āļ”āđ‰āđ€āļ­āļ‡āđ‚āļ”āļĒāļ„āļĨāļīāļāļ—āļĩāđˆ āļ•āļąāđ‰āļ‡āļ„āđˆāļē

āļ•āļąāđ‰āļ‡āļ„āđˆāļēāļ„āļ§āļēāļĄāđ€āļ›āđ‡āļ™āļŠāđˆāļ§āļ™āļ•āļąāļ§

āļ„āļļāļ“āļŠāļēāļĄāļēāļĢāļ–āđ€āļĨāļ·āļ­āļāļāļēāļĢāļ•āļąāđ‰āļ‡āļ„āđˆāļēāļ„āļļāļāļāļĩāđ‰āđ‚āļ”āļĒāđ€āļ›āļīāļ”/āļ›āļīāļ” āļ„āļļāļāļāļĩāđ‰āđƒāļ™āđāļ•āđˆāļĨāļ°āļ›āļĢāļ°āđ€āļ āļ—āđ„āļ”āđ‰āļ•āļēāļĄāļ„āļ§āļēāļĄāļ•āđ‰āļ­āļ‡āļāļēāļĢ āļĒāļāđ€āļ§āđ‰āļ™ āļ„āļļāļāļāļĩāđ‰āļ—āļĩāđˆāļˆāļģāđ€āļ›āđ‡āļ™

āļĒāļ­āļĄāļĢāļąāļšāļ—āļąāđ‰āļ‡āļŦāļĄāļ”
āļˆāļąāļ”āļāļēāļĢāļ„āļ§āļēāļĄāđ€āļ›āđ‡āļ™āļŠāđˆāļ§āļ™āļ•āļąāļ§
  • āļ„āļļāļāļāļĩāđ‰āļ—āļĩāđˆāļˆāļģāđ€āļ›āđ‡āļ™
    āđ€āļ›āļīāļ”āđƒāļŠāđ‰āļ‡āļēāļ™āļ•āļĨāļ­āļ”

    āļ›āļĢāļ°āđ€āļ āļ—āļ‚āļ­āļ‡āļ„āļļāļāļāļĩāđ‰āļĄāļĩāļ„āļ§āļēāļĄāļˆāļģāđ€āļ›āđ‡āļ™āļŠāļģāļŦāļĢāļąāļšāļāļēāļĢāļ—āļģāļ‡āļēāļ™āļ‚āļ­āļ‡āđ€āļ§āđ‡āļšāđ„āļ‹āļ•āđŒ āđ€āļžāļ·āđˆāļ­āđƒāļŦāđ‰āļ„āļļāļ“āļŠāļēāļĄāļēāļĢāļ–āđƒāļŠāđ‰āđ„āļ”āđ‰āļ­āļĒāđˆāļēāļ‡āđ€āļ›āđ‡āļ™āļ›āļāļ•āļī āđāļĨāļ°āđ€āļ‚āđ‰āļēāļŠāļĄāđ€āļ§āđ‡āļšāđ„āļ‹āļ•āđŒ āļ„āļļāļ“āđ„āļĄāđˆāļŠāļēāļĄāļēāļĢāļ–āļ›āļīāļ”āļāļēāļĢāļ—āļģāļ‡āļēāļ™āļ‚āļ­āļ‡āļ„āļļāļāļāļĩāđ‰āļ™āļĩāđ‰āđƒāļ™āļĢāļ°āļšāļšāđ€āļ§āđ‡āļšāđ„āļ‹āļ•āđŒāļ‚āļ­āļ‡āđ€āļĢāļēāđ„āļ”āđ‰
    āļĢāļēāļĒāļĨāļ°āđ€āļ­āļĩāļĒāļ”āļ„āļļāļāļāļĩāđ‰

  • āļ„āļļāļāļāļĩāđ‰āļŠāļģāļŦāļĢāļąāļšāļāļēāļĢāļ•āļīāļ”āļ•āļēāļĄāļ—āļēāļ‡āļāļēāļĢāļ•āļĨāļēāļ”

    āļ›āļĢāļ°āđ€āļ āļ—āļ‚āļ­āļ‡āļ„āļļāļāļāļĩāđ‰āļ—āļĩāđˆāļĄāļĩāļ„āļ§āļēāļĄāļˆāļģāđ€āļ›āđ‡āļ™āđƒāļ™āļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āđ€āļžāļ·āđˆāļ­āļāļēāļĢāļ§āļīāđ€āļ„āļĢāļēāļ°āļŦāđŒ āđāļĨāļ° āļ™āļģāđ€āļŠāļ™āļ­āđ‚āļ›āļĢāđ‚āļĄāļŠāļąāļ™ āļŠāļīāļ™āļ„āđ‰āļē āļĢāļ§āļĄāļ–āļķāļ‡āļŦāļĨāļąāļāļŠāļđāļ•āļĢāļŸāļĢāļĩ āđāļĨāļ° āļŠāļīāļ—āļ˜āļīāļžāļīāđ€āļĻāļĐāļ•āđˆāļēāļ‡ āđ† āļ„āļļāļ“āļŠāļēāļĄāļēāļĢāļ–āđ€āļĨāļ·āļ­āļāļ›āļīāļ”āļ„āļļāļāļāļĩāđ‰āļ›āļĢāļ°āđ€āļ āļ—āļ™āļĩāđ‰āđ„āļ”āđ‰āđ‚āļ”āļĒāđ„āļĄāđˆāļŠāđˆāļ‡āļœāļĨāļ•āđˆāļ­āļāļēāļĢāļ—āļģāļ‡āļēāļ™āļŦāļĨāļąāļ āđ€āļ§āđ‰āļ™āđāļ•āđˆāļāļēāļĢāļ™āļģāđ€āļŠāļ™āļ­āđ‚āļ›āļĢāđ‚āļĄāļŠāļąāļ™āļ—āļĩāđˆāļ­āļēāļˆāđ„āļĄāđˆāļ•āļĢāļ‡āļāļąāļšāļ„āļ§āļēāļĄāļ•āđ‰āļ­āļ‡āļāļēāļĢ
    āļĢāļēāļĒāļĨāļ°āđ€āļ­āļĩāļĒāļ”āļ„āļļāļāļāļĩāđ‰

āļšāļąāļ™āļ—āļķāļāļāļēāļĢāļ•āļąāđ‰āļ‡āļ„āđˆāļē