Cara membuat header di html dan css

Ada beberapa header web yang pernah saya buat, kali ini header HTML paling keren yang berhasil saya buat, setidaknya menurut selera pribadi.

Desain header HTML ini termasuk yang sangat saya idam-idamkan. Selain desain yang simple dan sangat fungsional sekali di tampilan mobile view, menu horizontal scroll.

Model header HTML keren dengan menu scroll di samping logo ini sekarang banyak di implementasi oleh web-web populer.

Dalam satu balok header diisi tiga item, icon burger, logo dan jejeran nav menu.

Hasil akhir tampilan di desktop seperti biasa saja dan sangat umum sekali, sebelah kiri logo dan sebelah kanan jejeran beberapa menu wajib.

Begitu di tampilan layar smartphone, menu ini tidak tidak berubah posisi apalagi tersembunyi di icon burger.

Contohnya seperti menu website InsertApps.com.

Responsive menu navigation scroll tetap berada di samping kanan logo, headernya tidak berantakan, menu-menunya bisa digeser kiri dan kanan, istilah kerennya navbar scrolling.

Tutorial singkat ini dibuat dengan bantuan CSSS framework Basscss. Berikut cara membuat header HTML dengan menu scroll paling keren ini:

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
    <div class="pr2">
      <h1 class="m0">
        <a href="#" class="white text-decoration-none">YOUR LOGO</a>
      </h1>
    </div>
    <div class="nav-scroll">
      <ul class="list-reset m0 h6 flex">
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">About</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Blog</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Contact</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Costumer</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">FAQ</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Register</a>
        </li>
      </ul>
    </div>
  </div>
</header>

Secara keseluruhan, style CSS yang digunakan semuanya sudah tersedia secara lengkap bawaan CSS Framework Basscss. Hanya sedikit saja penambahan kode CSS tambahannya.

Berikut kode CSS tambahan yang tidak tersedia dalam framework Basscss:

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}

Berikut penjelasan kode HTML dan CSS:

<header class="top-0 left-0 right-0 bg-blue p2"></header>

Tag <header> adalah block code semantic dari HTML5 untuk membungkus isi dari semua item properti yang dalam satu balok header.

Baris kode class="top-0 left-0 right-0 bg-blue p2" adalah sintak untuk memanggil class-class yang sudah disediakan oleh CSS Framework Basscss.

Style CSS dari class

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
0 akan merender satu baris balok di bagian atas layar, mulai dari kiri hingga full ke sisi kanan layar.

Class

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
1 adalah CSS style dari
#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
2 akan menghasilkan balok header berwarna biru.

Class

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
3 adalah CSS style dari
#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
4 berfungsi untuk menambah spasi 1rem (16 pixel) di dalam ruang balok header.

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>

Baris kode

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
5 untuk membungkus isi dari item-item header (icon, logo dan jejeran item navbar menu).

Bungkusan tersebut diberi style

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
6 yang berfungsi untuk menghasilkan display flexible layout (flexbox). Dengan fitur flexbox ini, desain layout HTML jadi lebih mudah dan sintak kodenya yang dihasilkan jadi lebih sederhana.

Class

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
7 adalah style CSS dari
#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
8 yang akan memposisikan isi dalam balok ini akan berada di tengah secara vertical.

Berikutnya…

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>

Baris kode

#burger {
  cursor: pointer;
}

.burger-line {
  width: 1.125rem;
  height: 0.1255rem;
  margin: 0.25rem 0;
}

.nav-scroll {
  margin-left: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
9 sampai pada
<header class="top-0 left-0 right-0 bg-blue p2"></header>
0 div penutup adalah item pertama yang berisi icon burger menu.

Kode

<header class="top-0 left-0 right-0 bg-blue p2"></header>
1 ini boleh dipakai atau tidak tidak apa. Pada kasus ini, tujuan dari
<header class="top-0 left-0 right-0 bg-blue p2"></header>
1 kode variabel penanda pada javascript untuk fungsi mengaktifkan side menu. Icon burger ini juga di insert style css tambahan
<header class="top-0 left-0 right-0 bg-blue p2"></header>
3 untuk efek ganti pointer mouse menjadi pointer icon tangan.

Sintak class

<header class="top-0 left-0 right-0 bg-blue p2"></header>
4 style CSS dari
<header class="top-0 left-0 right-0 bg-blue p2"></header>
5 untuk menambah jarak ke item berikut di sebelah icon burger.

Tiga baris

<header class="top-0 left-0 right-0 bg-blue p2"></header>
6 yang diulang sebanyak tiga kali untuk mencetak tiga baris icon burger. Hasil dari tiga baris yang berjejer tersebut dihasilkan berdasarkan kode style CSS
<header class="top-0 left-0 right-0 bg-blue p2"></header>
7.

Kode berikutnya…

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
    <div class="pr2">
      <h1 class="m0">
        <a href="#" class="white text-decoration-none">YOUR LOGO</a>
      </h1>
    </div>
  </div>
</header>

Baris kode

<header class="top-0 left-0 right-0 bg-blue p2"></header>
8 hingga div penutup
<header class="top-0 left-0 right-0 bg-blue p2"></header>
0 adalah item kedua untuk menampilkan logo brand website, baik itu logo grafik maupun title text. Item kedua ini masih disebelah kiri.

Sintak

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
0 adalah tag heading untuk mencetak title atau logo.

Penambahan

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
1 untuk mereset margin heading ke nilai 0, sehingga posisi logo fix ditengah-tengah balok header. Biasanya margin bawah tag H1 mempengaruhi tata letak web sedikit kurang rapi.

Sedangkan

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
2 untuk menghasil title logo berwarna putih, dan dekorasi efek hover teks link default browser di nonaktifkan.

Kode berikutnya…

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
    <div class="pr2">
      <h1 class="m0">
        <a href="#" class="white text-decoration-none">YOUR LOGO</a>
      </h1>
    </div>
    <div class="nav-scroll">
      <ul class="list-reset m0 h6 flex">
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">About</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Blog</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Contact</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Customer</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">FAQ</a>
        </li>
        <li class="inline-block mr2">
          <a class="white text-decoration-none" href="#">Register</a>
        </li>
      </ul>
    </div>
  </div>
</header>

Baris kode

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
3 hingga tag div penutup
<header class="top-0 left-0 right-0 bg-blue p2"></header>
0 adalah pembungkus item ketiga navbar yang akan berisi jejeran menu.

Di bagian

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
5 ini adalah class CSS tambahan yang tidak ada dalam CSS framework Basscss. Class
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
5 berisi style CSS
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
7.

Kode CSS

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
8 akan memposisikan blok pembungkus item ketiga navbar jejer di sisi kanan layar. Style
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center"></div>
</header>
9 memberi efek auto scroll secara sumbu x bila blok navbar. Style
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
0 menyembunyikan efek scrol secara sumbu y.

Baris kode dari…

<ul class="list-reset m0 h6 flex">
  <li class="inline-block mr2">
    <a class="white text-decoration-none" href="#">About</a>
  </li>
</ul>

Adalah untuk menampung item-item menu secara listing.

Kode dari

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
1 adalah style reset dari class dari framework Basscss yang akan menghilangkan item bullet listing, margin ke posisi 0. Ukuran huruf sebesar 12 pixel diambil dari class
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
2.

Dan class

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
3 untuk memaksakan isi dari blok pembukus item navbar bersifat berjejeran.

Baris kode listing

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
4 dan seterusnya, di-insert class-class dari framerwork Basscsss.

Secar default, tag

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
5 akan menciptakan listing secara berurutan ke bawah. Untuk memaksa berurutan menyamping di tambah
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
6 untuk meratakan listing secara horizontal dengan jarak margin ke kanan 2rem
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
7.

Terakhir, tag

<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
8 untuk mencetak item-item menu dengan fungsi text link. Class
<header class="top-0 left-0 right-0 bg-blue p2">
  <div class="flex items-center">
    <div id="burger" class="pr2">
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
      <div class="burger-line bg-white"></div>
    </div>
  </div>
</header>
9 adalah class bawaan framework Basscss untuk warna text putih, dan efek teks dekorasi hover link secara default browser di nonaktifkan.

Demikian akhir dari tutorial singkat ini, walau penjelasannya lumayan panjang. Namun kode yang dihasilkan lumayan pendek–bahkan masih bisa disederhanakan lagi–untuk hasil akhir yang cukup keren.

Hasil akhir demo dari tutorial singkat coding header HTML keren dengan navbar menu auto scroll pada layar smartphone ini adalah header website InsertApps itu sendiri.


Bila ada yang kurang jelas, jangan sungkan untuk bertanya di kolom komentar dibawah posting ini. Saya dengan senang hati akan menjawabnya.

Untuk mengikuti tutorial coding dasar HTML dan CSS silahkan daftar email di kolom Newsletter di bagian footer dan ikuti sosial media InsertApps untuk mendapatkan notifikasi update tutorial.