Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 19 : Membuat Navigasi Bar dengan CSS

By Web Design Purbalingga
Membuat Navigasi Bar dengan CSS – Website yang menarik adalah website atau blog yang bisa memberikan informasi yang mudah ditemukan. Salah satu caranya adalah dengan memberikan navigasi pada blogatau website untuk mengelompokan konten yang jenisnya mungkin berbeda – beda. Misalkan konten yang membahas tentang seputar olahraga, kesehatan, edukasi dan lain sebagainya.

Membuat Menu Navigasi

Jenis navigasi ada banyak, namun ada beberapa yang sudah jarang digunakan. Ada beberapa contoh navigasi diantaranya adalah navigasi yang letaknya berada di atas setelah bagian header website, kemudian ada navigasi yang letaknya berada di bagian paling bawah blog dan bergabung di bagian footer dan juga ada navigasi yang berada di bilah kanan atau kiri sebuah website.
Baiklah, apa saja yang dibutuhkan untuk membuat navigasi. Ada banyak cara untuk membangun sebuah navigasi pada sebuah blog atau website. Tentunya yang paling utama adalah elemen yang akan digunakan.

Elemen yang digunakan

Saat membuat menu navigasi, tentunya butuh tag yang dapat membungkus elemen dalamnya yaitu kita perlu tag <nav> dan ditutup dengan </nav>. Kemudian membuat list menunya dengan menggunakan tag <li> dan tag </li> dan tidak lupa di dalam tag <li> ini kita tambahkan tag <a href=””> (tag untuk menambahkan link) agar menu tersebut nantinya bisa di klik. Untuk lebih jelasnya perhatikan baris kode berikut ini dan praktekan pada teks editor kalian.
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Dropdown dengan CSS</title>
</head>
<body>
  <h2>Selamat Datang di Forum Web Design Purbalingga</h2>
  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">Tutorial</a>
    <a href="#">Unduh</a>
  </div>
</body>
</html>
Baris kode di atas tentunya belum menghasilkan navigasi yang menarik, karena kita belum menambahkan css nya. Tambahkan baris kode css berikut ini ke dalam tag <style>, tepatnya di bawah tag <title>.
<style type="text/css">
  h2 {
   text-align: center; 
  }
    .navbar {
    overflow: hidden;
    background-color: teal;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #9999fa;
}
  </style>
Penjelasan
- Selektor nav = di sana ada property background dengan nilai teal yang berarti warna latar navigasi kita berwarna teal. Kemudian ada property max-width dengan nilai 100% yang berarti ukuran maksimalnya adalah dan tentunya ukuran ini bisa berpengaruh saat ukuran browser berubah (responsive). Berikutnya ada property height dengan nilai 30px yang berarti ukuran tinggi menu navigasi kita adalah 30px dan tentunya property dari selektor nav ini bisa kalian ubah sesuai selera kalian.
- Selektor li = di sana ada selektor li karena kita harus terlebih dahulu membuat list dengan menggunakan tag <li>. Property display adalah untuk  mengatur tampilan atau posisi elemen. Nilai dari display adalah inline-block yang berarti kita meminta agar list yang dibuat sebelumnya berubah menjadi satu baris. Property border-right digunakan untuk memberikan pembatas dengan berupa border atau garis tipis vertikal disetiap menu yang dibuat. Nilai properti border-right kita beri 1px yang berwarna #bbb (cek di color picker untuk melihat kode warna). Property float dengan nilai left hanya untuk mengatur posisi agar setiap jarak menu ini bisa tertata rapih. Selanjutnya adalah property margin untuk mengatur jarak antara elemen pembungkus dan elemen yang dibungkus. Baca lebih lengkapnya tentang property margin.
- Selektor li a = kenapa penulisan selektornya dobel? Jika kalian sudah membuat baris kode css pasti akan memasukan tag a (untuk membuat link) yang banyak tentunya agar si css ini bisa memberikan perintah yang jelas, bagian tag a yang mana yang akan di beri warna merah dan seterusnya. Property color dengan nilai white berarti kita ingin teks menunya berwarna putih. Property text-decoration dengan nilai none berarti menghilangkan garis bawah pada efek tag a href (link). Kemudian ada property padding yaitu untuk mengatur jarak antara elemen yang ada di dalam.
Hasil dari baris kode di atas

Kalian bisa berkreasi sendiri untuk membuat navigasi sesuai selera yang kalian inginkan. Yang terpenting adalah kalian paham struktur pembuatannya, yaitu elemen apa saja yang digunakan dan nilai property css nya seperti apa. Jadi kalian bisa mengembangkannya sendiri baik itu warna ukuran dan lain sebagainya.
Sekian materi tentang bagaimana caramembuat navigasi pada blog atau website dengan css. Jika ada poin yang belum dipahami, silahkan tinggalkan pertanyaan kalian di kolom komentar di bawah ini. Tetap semangat dan sampai jumpa di materi selanjutnya.