Cara Membangun Bilah Navigasi yang Responsif Menggunakan HTML dan CSS
Table of content:
Bilah navigasi responsif (navbar) sangat penting untuk meningkatkan pengalaman pengguna dan keterampilan desain web Anda.
Anda telah tiba di tempat yang tepat, terutama jika Anda seorang pemula yang mempelajari pengembangan front-end dan ingin membuat bilah navigasi yang responsif. Namun sebelum Anda mulai membuat bilah navigasi dengan HTML dan CSS, Anda perlu memahami prinsip dasar desain bilah navigasi yang responsif.
Inilah cara membuat bilah navigasi responsif hanya menggunakan HTML dan CSS, tanpa menggunakan satu baris JavaScript pun.
Baca Juga:
Prasyarat: Tiga Elemen Kunci dari Navbar yang Responsif
Sangat jelas bahwa sebagian besar pemilik situs web ingin memperoleh pengunjung baru. Langkah pertama untuk melakukannya adalah menunjukkan kepada pengunjung jalur yang jelas dan ringkas. Anda harus membuat navbar yang membangkitkan rasa ingin tahu dan menarik pengunjung secara bersamaan. Pertimbangkan tiga elemen kunci saat merancang navbar HTML yang ideal:
1. Sederhana
Itu harus jelas dan mudah dibaca. Alih-alih mengacaukan navbar dengan tautan ke setiap halaman, Anda harus memilih kategori yang lebih luas dari situs Anda. Setelah itu, Anda dapat menambahkan submenu sebagai dropdown, jika perlu.
2. Terlihat
Bilah navigasi responsif yang sederhana seharusnya tidak membosankan sama sekali. Anda harus tetap berpegang pada warna merek yang telah ditentukan sebelumnya untuk membuat desain lebih konsisten. Anda dapat bereksperimen dengan skema warna dan menggunakan warna yang lebih terang atau lebih gelap untuk menu highlight dan dropdown.
3. Responsif
Laporan penggunaan internet global oleh Statista menunjukkan bahwa 59,5 persen populasi global secara aktif menggunakan internet, dan 92,6 persen menggunakannya melalui perangkat seluler. Itu cukup untuk memahami pentingnya penerapan navigasi seluler responsif di situs Anda.
Navigasi seluler tingkat atas cukup populer. Anda dapat menggunakan menu hamburger, guillotine, ikon mengambang, dan tab. Ini adalah penyelamat ketika Anda memiliki lima atau lebih kategori dengan banyak hierarki. Navigasi tingkat atas dapat menghemat ruang layar secara signifikan, terutama dengan situs yang padat konten.
Bilah tab dengan ikon yang relevan sangat pas di bilah navigasi bawah karena biasanya berisi tiga hingga lima menu pada tingkat hierarki yang sama. Sub-menu dan menu berurutan mengikuti kategori utama dengan hubungan orangtua-anak.
Jika Anda baru mengenal dunia desain web, Anda harus selalu berkonsultasi dengan beberapa prinsip desain web yang relevan dan responsif untuk mendapatkan lebih banyak tip.
Sekarang prinsip desain sudah jelas, saatnya untuk mulai membuat menu navbar responsif eksklusif Anda. Ada berbagai fitur CSS untuk membangun situs web yang responsif. Namun, panduan ini akan mengajari Anda cara membuat menu navigasi responsif dengan CSS Flexbox dan Media Queries dari awal.
Jadi, seperti apa navbar CSS Anda? Itu akan memiliki navigasi tingkat atas dengan:
- Logo
- Menu Navigasi
- Menu drop down
- Menu Hamburger (menggunakan hack kotak centang)
Memulai Dengan HTML
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">MUO</div>
<ul class="nav-links">
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<div class="menu">
<li><a href="https://www.makeuseof.com/">Home</a></li>
<li><a href="https://www.makeuseof.com/">About</a></li>
<li class="services">
<a href="https://www.makeuseof.com/">Services</a>
<ul class="dropdown">
<li><a href="https://www.makeuseof.com/">Dropdown 1 </a></li>
<li><a href="https://www.makeuseof.com/">Dropdown 2</a></li>
<li><a href="https://www.makeuseof.com/">Dropdown 2</a></li>
<li><a href="https://www.makeuseof.com/">Dropdown 3</a></li>
<li><a href="https://www.makeuseof.com/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="https://www.makeuseof.com/">Pricing</a></li>
<li><a href="https://www.makeuseof.com/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
Anda akan memiliki menu tarik-turun di dalam Melayani (menu utama. Anda dapat melewati menu hamburger sambil membuat navbar desktop.
Struktur navbar HTML Anda sekarang sudah selesai. Berikut tampilan outputnya:
Menerapkan CSS Dasar: Utilitas
Mulailah dengan menerapkan beberapa gaya CSS dasar untuk menyetel ulang nilai default, membuatnya lebih mudah untuk menata navbar:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: cursive;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
Menata Navbar Menggunakan CSS Flexbox
Anda dapat menggunakan CSS Flexbox untuk menerapkan efek melayang untuk penyorotan. Itu Melayani menu membutuhkan sedikit perhatian ekstra karena Anda harus mengaturnya tampilan: tidak ada; untuk kondisi normal dan atur ke tampilan: blok; ketika seseorang melayang di atasnya.
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: teal;
color: #fff;
}.nav-links a {
color: #fff;
}
/* LOGO */
.logo {
font-size: 32px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 18px;
}
.menu li:hover {
background-color: #4c9e9e;
border-radius: 5px;
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
position: relative;
}
.dropdown {
background-color: rgb(1, 139, 139);
padding: 1em 0;
position: absolute; /*WITH RESPECT TO PARENT*/
display: none;
border-radius: 8px;
top: 35px;
}
.dropdown li + li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
text-align: center;
}
.dropdown li:hover {
background-color: #4c9e9e;
}
.services:hover .dropdown {
display: block;
}
CSS ini akan membuat bilah navigasi yang terlihat seperti berikut:
Navbar Responsif Menggunakan Kueri Media CSS
Setelah Anda memasukkan cuplikan kode ini, Anda akan memiliki menu hamburger yang hanya muncul di perangkat seluler dengan ukuran layar kecil. Untuk ini, Anda akan memiliki dua anak dari
<body>
<nav class="navbar">
<div class="logo">MUO</div>
<ul class="nav-links">
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<div class="menu">...</div>
</ul>
</nav>
</body>
Logika di balik penggunaan elemen kotak centang adalah ketika tidak dicentang, elemen itu akan ada tampilan: tidak ada; sedangkan saat dicentang, itu akan mengubah properti CSS dari pemilih saudara umum (~) dengan menyetelnya ke tampilan: blok; Sederhananya, Anda menggunakan kotak centang untuk beralih hamburger dan menu navigasi antara keadaan yang diperluas dan tersembunyi.
Atur gaya navbar CSS untuk perangkat seluler menggunakan kueri media CSS, seperti yang ditunjukkan di bawah ini. Dalam hal ini, Anda juga dapat menggunakan kisi CSS dan JS untuk menu seluler.
input[type=checkbox] {
display: none;
}
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
@media (max-width: 768px) {
.menu {
display:none;
position: absolute;
background-color:teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color:#4c9e9e;
transition: 0.3s ease;
}
.menu li + li {
margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
Inilah tampilan desain Anda pada browser desktop:
Dan inilah tampilannya di layar seluler:
Bereksperimen Adalah Cara Terbaik untuk Merancang Bilah Navigasi Ideal Anda
Memiliki navigasi situs web yang baik sangat memengaruhi rasio pentalan dan rasio konversi. Pada dasarnya, lipatan pertama situs web Anda harus memiliki konteks yang jelas, navigasi hierarkis, dan ajakan bertindak.
Struktur navigasi situs web Anda akan membantu pengunjung membuka halaman populer atau yang lagi ngetren di situs Anda dalam tiga klik atau kurang. Jadi, teruslah bereksperimen dan merancang navigasi situs yang lebih baik!
Artikel Terkait
