[Tutorial] Cara Membuat Bottom Navigation Bar di Blog

Seotechman.com, Bogor 16/02/2020. Berbicara tentang tutorial seperti ini, saya rasa mungkin sudah banyak. Terlebih jika Anda mencarinya di Google.

Namun untuk sebagian website maupun blog, masih jarang yang memakai bottom navigation bar ini. Tabs navigation bar masuk kedalam kategori tren UI dan UX tahun ini "tidak menutup kemungkinan".

Apa itu tabs navigation bar, dan seberapa pentingnya untuk web / blog Anda?

Nah sebelum kita lanjut ke tutorial, ada baiknya kita mengenal pengertiannya secara singkat saja.

Pada umumnya, navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web / blog, navigasi dianggap penting agar user / pengguna yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website Anda.

Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Biasanya, pada sebuah website, navigasi tertampil pada menu dan link yang terstruktur.

Seringkali, saat kita membuka sebuah website, kita merasa kesal karena tidak mendapatkan halaman website yang dicari dikarenakan navigasi yang ruwet dan tidak jelas. Selain itu dapat diartikan, Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting.

Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya. Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut.

Jika diartikan, maka seperti itulah pengertiannya. Oke untuk mempersingkat waktu, kita langsung saja ketahap pembuatannya dan apa saja yang kita perlukan.

Untuk yang sudah jago koding saya rasa hal seperti ini sudah jadi makanan sehari-hari (terlalu mudah).

Cara Membuat Bottom Navigation Bar di Blog

Langkah 1. (CSS)

Bisa dilihat penampakannya berikut ini:

.tab-nav-container {
 
    background-color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: -webkit-box;
    display: flex;
 position: fixed;
 bottom: 0;
 
    -webkit-box-pack: justify;
 
            justify-content: space-between;
    padding: 30px;
    width: 100%;
}

.tab {
    background-color: #ffffff;
    border-radius: 50px;
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    padding: 0 20px;
    margin: 0 10px;
    -webkit-transition: background 0.4s linear;
    transition: background 0.4s linear;
}

.tab i {
    font-size: 1.2em;
}

.tab p {
    font-weight: bold;
    overflow: hidden;
    max-width: 0;
}

.tab.active p {
    margin-left: 10px;
    max-width: 200px;
    -webkit-transition: max-width 0.4s linear;
    transition: max-width 0.4s linear;
}

.tab.active.purple {
    background-color: rgba(91, 55, 183, 0.2);
    color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
    background-color: rgba(201, 55, 157, 0.2);
    color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
    background-color: rgba(230, 169, 25, 0.2);
    color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
    background-color: rgba(28, 150, 162, 0.2);
    color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px) {
    .tab-nav-container {
        padding: 20px;
        width: 350px;
    }

    .tab {
        padding: 0 10px;
        margin: 0;
    }

    .tab i {
        font-size: 1em;
    }
}

Silahkan kopi semua kode CSS diatas, setelah itu masukan kedalam file style.css. Untuk blogger tempatkan saja dibagian atas </style> atau //]]></b:skin>.

Langkah 2. (Javascript / JS)

// Get all the tabs
const tabs = document.querySelectorAll('.tab');

tabs.forEach(clickedTab => {
    // Add onClick event listener on each tab
    clickedTab.addEventListener('click', () => {
        // Remove the active class from all the tabs (this acts as a "hard" reset)
        tabs.forEach(tab => {
            tab.classList.remove('active');
        });

        // Add the active class on the clicked tab
        clickedTab.classList.add('active');
  const clickedTabBGColor = getComputedStyle(clickedTab).getPropertyValue('color');
  console.log(clickedTabBGColor);
  document.body.style.background = clickedTabBGColor;
    });
});

Kopi kembali Js diatas, dan tempel diatas </body>.

Langkah 3. (HTML)

<div class="tab-nav-container">
    <div class="tab active purple">
        <i class="fas fa-home"></i>
        <p>Home</p>
    </div>
    <div class="tab pink">
        <i class="far fa-heart"></i>
        <p>Likes</p>
    </div>
    <div class="tab yellow">
        <i class="fas fa-search"></i>
        <p>Search</p>
    </div>
    <div class="tab teal">
        <i class="far fa-user"></i>
        <p>About</p>
    </div>
</div>

Tempatkan kode HTML dibagian bawah footer atau terserah dimana saja sesuai keinginan masing-masing. Tapi menurut saya bagusnya ya dibawah footer.

Apabila semuanya sudah lengkap dan sudah ready, waktunya Anda untuk mengecek bagaimana hasilnya.

Note:
Silahkan atur kembali pada bagian CSS nya. Atur sebaik mungkin sesuaikan dengan selera Anda, hingga terlihat bagus dan responsive.

Mungkin saya rasa cukup untuk tutorial cara membuat bottom navigation bar di blog. Semoga bermanfaat!

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini