Cara Membuat Bar Navigasi Menggunakan HTML dan CSS

Bar navigasi (navbar) yang direka bentuk dengan baik dan berfungsi ialah salah satu komponen utama mana-mana tapak web. Ia berfungsi sebagai peta jalan untuk pengguna, membantu mereka menavigasi pelbagai halaman. Navbar biasanya diletakkan di bahagian atas halaman web, di mana ia sentiasa kelihatan untuk pengguna mengakses pautan utama. Dalam artikel ini, kami akan meneroka cara mencipta bar navigasi CSS yang menarik secara visual dan berfungsi menggunakan HTML dan CSS. Kami juga akan membincangkan pelbagai teknik untuk memastikan bar navigasi kekal di bahagian atas halaman.

Anda boleh melihat demo langsung bar navigasi ini dan meneroka fungsinya dengan melawati pratonton pada CodePen.

Coretan kod berikut menunjukkan penciptaan bar navigasi responsif dengan logo, item menu dan butang seruan tindak. Berikut ialah kod HTML dan CSS:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

      .navbar {
        display: flex;
        background: #fff;
        border-radius: 30px;
        padding: 10px 20px;
        margin: 0 auto;
        width: 95%;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .logo {
        width: 12rem;
      }

      .menu {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .item {
        margin: 0 15px;
      }

      .item a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      .item a:hover {
        color: #2258c3;
      }

      button {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="Cara Membuat Bar Navigasi Menggunakan HTML dan CSS" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

Memecahkan Kod
Mari kita lihat dengan lebih dekat cara navbar dicipta menggunakan HTML dan CSS.

Struktur HTML

Bahagian HTML kod adalah mudah. Ia terdiri daripada elemen nav yang mengandungi tiga komponen utama:

• Cara Membuat Bar Navigasi Menggunakan HTML dan CSS (imej)
• Senarai **menu **dengan pautan boleh klik (Laman Utama, Mengenai Kami, Hubungi Kami, Blog)
• Butang **yang berfungsi sebagai seruan bertindak (Hubungi Sekarang)
• Struktur dibalut di dalam elemen, yang bertindak sebagai bekas untuk bar navigasi.

<nav class="navbar">
  <img src="logo-url" alt="Cara Membuat Bar Navigasi Menggunakan HTML dan CSS" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

Cara Membuat Bar Navigasi Menggunakan HTML dan CSS dibuat menggunakan tag . Menu ialah senarai tidak tersusun (

)

yang mengandungi item senarai (

)

dan setiap item senarai mempunyai tag sauh () untuk membuat pautan ke halaman yang berbeza. Akhir sekali, butang itu ialah tag ringkas dengan penggayaan.

Menggayakan dengan CSS

Keajaiban berlaku dalam bahagian CSS, di mana kami menentukan reka letak dan penampilan bar navigasi. Mari bincangkan beberapa elemen utama.

Latar Belakang dan Penggayaan Badan
Badan mempunyai latar belakang kecerunan yang beralih daripada biru (#2258c3) kepada merah jambu (#fd2df3). Ketinggian ditetapkan kepada 100vh (ketinggian viewport), yang memastikan latar belakang memenuhi keseluruhan skrin dan tiada jidar untuk mengelakkan ruang yang tidak diingini di sekeliling halaman.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Penggayaan Navbar

Bar navigasi mempunyai latar belakang putih dan bucu bulat (jejari sempadan: 30px). Pelapik dan margin mencipta jarak di dalam dan di luar bar navigasi. Ciri paparan: flex menjadikan navbar sebagai flexbox, membenarkan penjajaran mendatar bagi elemen anaknya. Kandungan justify: space-between memastikan logo, menu dan butang dijarakkan sama rata.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Membetulkan Navbar ke Atas

Salah satu fungsi utama bar navigasi ialah kekal di bahagian atas halaman semasa menatal. Untuk mencapai ini, kami menggunakan kedudukan: harta tetap. Ini membolehkan bar navigasi kekal tetap di bahagian atas (atas: 0) tanpa mengira menatal. Selain itu, indeks z: 9999 memastikan bar navigasi sentiasa berada di atas elemen lain pada halaman.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Item Menu dan Interaktiviti

Item menu dipaparkan secara mendatar menggunakan paparan: lentur pada kelas .menu. Item diberi jarak melalui jidar, dan setiap item digayakan untuk mengalih keluar gaya senarai lalai dan padding. Pautan dalam item menu tidak mempunyai hiasan teks dan digayakan dengan fon tebal dan warna gelap.

Kesan tuding pada pautan menukar warna agar sepadan dengan warna latar belakang biru (#2258c3), memberikan isyarat visual bahawa pautan itu interaktif.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Penggayaan Butang

Butang digayakan dengan latar belakang biru (#2258c3), teks putih dan sudut bulat (jejari sempadan: 20px). Pada tuding, latar belakang bertukar kepada merah jambu (#fd2df3) untuk memadankan kecerunan di latar belakang.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Cara Memastikan Navbar Sentiasa Di Atas

Untuk membetulkan pengepala di bahagian atas halaman dengan CSS, anda menggunakan position: fixed property bersama atas: 0. Ini memastikan navbar akan kekal di bahagian atas semasa pengguna menatal. Begini cara ia digunakan dalam kod:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Atas ialah kandungan terperinci Cara Membuat Bar Navigasi Menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!