Belajar Positioning untuk Navbar dan Footer - Part 4
Belajar positioning navbar pada Tailwind
Tech writer and lecturer from Indonesia who is passionate about backend technology.
I ensure that 99% of my content is written in Indonesian because I aim to encourage Indonesian tech enthusiasts to write and share their knowledge.
I often provide guidance to IT students in Indonesia, emphasizing the importance of continuous learning. Don't waste your post-campus life by doing nothing. Read, learn, and study more to become better professionals in the tech industry!
Overview
Sebuah website gak jauh dari navbar dan sebuah navbar gak jauh dari positioning pada CSS, kalau kita mengaca pada konsep dasar positioning CSS Layout, kita akan kenal istilah berikut:
staticrelativefixedabsolutesticky
Nah sekarang kita akan nyobain membuat navbar pada tailwind.
Kick Off
Kita masih menggunakan kode yang digunakan pada tutorial sebelumnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<div class="flex flex-wrap w-full p-3">
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sekarang kita ubah sedikit kodenya supaya kita bisa membuat sebuah navbar sederhana:
<body class="bg-gray-100">
<!-- Tambah Kode navbar ini -->
<nav class="container mx-auto w-full p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
<div class="flex w-full justify-center mx-auto">
<p class="text-white text-lg font-bold">My Web App</p>
</div>
</nav>
<div class="container mx-auto p-4">
Sekarang website kamu akan kaya gini bentuknya.
Bang kok gak full sih navbar kan full
Itu kan saya pake class container ya, makanya dia nyesuain lebarnya cuma segitu, kalau kamu mau full ya hapus aja container classnya, ini kan nyontohin doang.
Jangan lupa hapus juga rounded-bl-lg dan rounded-br-lg untuk bikin bagian bawah kanan dan kiri jadi bulet gitu biar keren.
Tapi saya mah pake container aja ya, terserah kalian mau ikut apa gak.
Nah sekarang tugas kalian adalah memperbanyak konten biar bisa discroll kaya begini.
Gak perlu diajarin dong cara bikinnya gimana? Tinggal copy aja satu div dan paste terus-terusan.
Nah as simple as the docs kita bisa atur positioningnya lewat panduan ini. Sekarang kita ubah code navnya agar menjadi seperti ini:
<nav class="fixed inset-x-0 top-0">
<div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
<div class="flex justify-center">
<p class="text-white text-lg font-bold">My Web App</p>
</div>
</div>
</nav>
Secara umum sebuah website menggunakan navbar dalam bentuk sticky dimana navbar tersebut akan mengikuti seiring dengan pengguna saat melakukan scroll.
Apa fungsi class inset-x-0 dan top-0? Berdasarkan dokumentasi dari tailwind, kita dapat mengatur posisi sebuah komponen dengan mudah.
Class inset-x-0 berfungsi untuk mengatur jarak elemen atau komponen secara horizontal, karena kita menggunakan x. Nah karena kita pake inset-x-0, maka jarak antara kanan dan kiri menjadi 0 dan otomatis elemen ini bisa mengikuti jarak yang ditentukan pada elemen di dalamnya. Sedangkan class top-0 membuat jarak ke bagian atas menjadi 0px, artinya sangat rapat ke bagian atas.
Footer
Setelah nyobain bagaimana navbar (navigation bar) dibuat, kita perlu memikirkan bagaimana cara membuat footer. Pada dasarnya footer akan berada di bawah dan tidak akan bergerak. Kita bisa saja membuatnya dengan cara seperti ini.
<div class="container mx-auto p-4 mt-12">
.
.
.
</div>
<footer class="container mx-auto fixed inset-x-0 bottom-0 w-full z-50">
<div class="p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
<div class="flex justify-center">
<p class="text-white text-lg font-bold">Footer</p>
</div>
</div>
</footer>
Sekarang tampilannya menjadi seperti ini.
Ada yang aneh? Tentu, karena footernya terus berada di bawah pada saat kita melakukan scroll. Tentu saja untuk sebuah aplikasi web berbasis desktop, hal ini sangat tidak masuk akal.
Tampilan di atas cocok untuk diimplementasikan untuk web yang berfokus pada tampilan mobile, sehingga kita seolah-olah membuat menu yang menempel di bawah.
Sayangnya, ini tidak cocok untuk desktop. Lalu bagaimana memperbaikinya? Ganti saja class fixed pada footer menjadi relative.
Lalu mungkin saja ada pertanyaan dari kalian, pada saat kalian mengurangi konten di dalamnya, entah kenapa footer tiba-tiba naik ke atas.
Mengapa hal ini dapat terjadi? Tentu, karena footer mengisi ruang kosong di dalamnya dan ini sangatlah wajar. Bagaimana cara mengatasinya? Sebelum saya jawab, kita pahami dulu teorinya.
Secara teori inilah yang terjadi pada web buatan kita, dapat dilihat bahwa screen yang besar hanya diisi oleh tiga konten saja. Selain itu pada element content, datanya hanya sedikit sehingga otomatis tinggi dari elemen tersebut otomatis mengikuti tinggi keseluruhan konten. Elemen footer naik karena elemen tersebut mengisi ruang kosong dikarenakan tinggi dari elemen content sangatlah pendek.
Artinya, apabila pada bagian element content hanya sedikit konten saja yang dibuat, sangat wajar apabila elemen footer tiba-tiba naik ke atas.
Bagaimana cara mengatasinya? Sederhananya, ya kita harus mengisi kontennya. Secara teori tidak mungkin kita membuat website dimana website tersebut hanya berisi sedikit konten, pasti saja elemen pada bagian content akan panjang ke bawah dan dipisahkan dengan beberapa section. Namun, sebenarnya secara teori kita bisa mengatasinya.
Pertama, kita ubah dulu body-nya agar memiliki tinggi minimal sebesar screen.
<body class="bg-gray-100 flex flex-col min-h-screen">
Class flex-col dan min-h-screen berperan penting dalam bagian ini, karena flex-col membuat susunan elemen di dalamnya menjadi berbaris secara vertikal dan min-h-screen membuat ukuran elemen di dalamnya berukuran tinggi minimal sebesar screen yang membuka halaman tersebut, sehingga elemen didalamnya dipaksa mengisi ruang kosong.
Kemudian pada bagian footer, kita perlu hilangkan positioningnya dan diberi classmt-auto. Hal ini bertujuan agar footer dapat mengikuti konten yang perlu diisi, apabila diberi positioning maka elemen akan keluar dari tempat yang seharusnya.
Class mt-auto juga berperan penting dalam membuat footer ke bagian bawah, dengan mengatur margin pada bagian atas antara footer dengan elemen div di atasnya, footer jadi dipaksa untuk mengisi ruang kosong pada bagian bawah. Hal ini menyebabkan otomatis footer akan terus berada di bawah.
<footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
<div class="flex justify-center">
<p class="text-white text-lg font-bold">Footer</p>
</div>
</footer>
Sekarang walaupun kamu mengisi banyak maupun sedikit konten, footer akan terus berada di bawah.
Berikut merupakan keseluruhan kode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Tailwind</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex flex-col min-h-screen">
<nav class="fixed inset-x-0 top-0">
<div class="container mx-auto p-3 bg-gray-700 rounded-bl-lg rounded-br-lg">
<div class="flex justify-center">
<p class="text-white text-lg font-bold">My Web App</p>
</div>
</div>
</nav>
<div class="container mx-auto p-4 mt-12">
<div class="flex flex-wrap w-full p-3">
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
<div class="p-3 w-full sm:w-1/2 lg:w-4/12">
<div class="flex shadow bg-white rounded-md">
<div class="flex flex-col p-4">
<h1 class="text-xl font-bold">
Hello World
</h1>
<p class="text-md mt-2">Lorem ipsum sir dolor amet</p>
</div>
</div>
</div>
</div>
</div>
<footer class="container mt-auto mx-auto p-3 bg-gray-400 rounded-tl-lg rounded-tr-lg">
<div class="flex justify-center">
<p class="text-white text-lg font-bold">Footer</p>
</div>
</footer>
</body>
</html>
Jadi bagaimana? Tidak sulit kan membuat navbar maupun footer pada tailwind? 😄
