Membuat header HTML keren responsive horizontal navbar auto scroll
Ilustrasi

Membuat header HTML keren responsive horizontal navbar auto scroll

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 top-0 left-0 right-0 akan merender satu baris balok di bagian atas layar, mulai dari kiri hingga full ke sisi kanan layar.

Class bg-blue adalah CSS style dari background-color: #0074d9; akan menghasilkan balok header berwarna biru.

Class p2 adalah CSS style dari padding: 1rem; 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 <div class="flex items-center"></div> untuk membungkus isi dari item-item header (icon, logo dan jejeran item navbar menu).

Bungkusan tersebut diberi style class="flex items-center 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 item-center adalah style CSS dari align-items: center; 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 <div id="burger" class="pr2"> sampai pada </div> div penutup adalah item pertama yang berisi icon burger menu.

Kode id="burger" ini boleh dipakai atau tidak tidak apa. Pada kasus ini, tujuan dari id="burger" kode variabel penanda pada javascript untuk fungsi mengaktifkan side menu. Icon burger ini juga di insert style css tambahan #burger {cursor: pointer;} untuk efek ganti pointer mouse menjadi pointer icon tangan.

Sintak class class="pr2" style CSS dari padding-right: 2rem; untuk menambah jarak ke item berikut di sebelah icon burger.

Tiga baris <div class="burger-line bg-white"></div> yang diulang sebanyak tiga kali untuk mencetak tiga baris icon burger. Hasil dari tiga baris yang berjejer tersebut dihasilkan berdasarkan kode style CSS .burger-line { width: 1.125rem; height: .1255rem; margin: .25rem 0;}.

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 <div class="pr2"> hingga div penutup </div> adalah item kedua untuk menampilkan logo brand website, baik itu logo grafik maupun title text. Item kedua ini masih disebelah kiri.

Sintak <h1 class="m0"><a href="#" class="white text-decoration-none">YOUR LOGO</a></h1> adalah tag heading untuk mencetak title atau logo.

Penambahan class="m0" 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 class="white text-decoration-none" 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 <div class="nav-scroll"> hingga tag div penutup </div> adalah pembungkus item ketiga navbar yang akan berisi jejeran menu.

Di bagian nav-scroll ini adalah class CSS tambahan yang tidak ada dalam CSS framework Basscss. Class nav-scroll berisi style CSS .nav-scroll {margin-left: auto; overflow-x: auto; overflow-y: hidden;}.

Kode CSS margin-left: auto; akan memposisikan blok pembungkus item ketiga navbar jejer di sisi kanan layar. Style overflow-x: auto; memberi efek auto scroll secara sumbu x bila blok navbar. Style overflow-y: hidden; 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 <ul class="list-reset m0 h6 flex"></ul> 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 h6.

Dan class flex untuk memaksakan isi dari blok pembukus item navbar bersifat berjejeran.

Baris kode listing <li class="inline-block mr2"><a class="white text-decoration-none" href="#">About</a></li> dan seterusnya, di-insert class-class dari framerwork Basscsss.

Secar default, tag <li></li> akan menciptakan listing secara berurutan ke bawah. Untuk memaksa berurutan menyamping di tambah class="inline-block mr2 untuk meratakan listing secara horizontal dengan jarak margin ke kanan 2rem mr2.

Terakhir, tag <a class="white text-decoration-none" href="#">About</a> untuk mencetak item-item menu dengan fungsi text link. Class white text-decoration-none 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.

Comment

comments powered by Disqus