3 Cara Membuat Menu Navigasi Rata Tengah, Yuk Pelajari!

Di dalam pengembangan dan desain web, menu navigasi adalah komponen penting untuk mempermudah pengunjung menjelajahi website. Oleh sebab itu, cara membuat menu navigasi rata tengah perlu dikuasai oleh developer dan designer.

Pasalnya, menu navigasi rata tengah ini memengaruhi estetika situs dan user experience. Untuk lebih lengkapnya, simak panduannya di bawah ini!

Fungsi utamanya adalah sebagai alat bantu untuk pengguna dalam menjelajahi berbagai bagian dari sebuah website.

Menu navigasi adalah serangkaian link yang diatur secara sistematis. Ini digunakan untuk mengarahkan pengguna ke halaman-halaman penting dalam website. 

Umumnya, menu navigasi terletak di bagian atas halaman web. Namun, ia juga bisa ditempatkan di sisi atau bagian bawah. Ini tergantung pada desain dan kebutuhan fungsional website.

Lebih lanjut, menu navigasi tidak terbatas untuk menyediakan rute navigasi yang jelas dan intuitif bagi pengguna. Namun, ia juga membantu meningkatkan usability dan aksesibilitas website dengan penyederhanaan struktur situs.

Dalam desain web, menu navigasi sering dirancang untuk responsif. Hal ini bertujuan untuk membuat menu dapat beradaptasi dengan berbagai ukuran layar dan perangkat.

Selain itu, menu navigasi juga bisa menampilkan elemen-elemen desain seperti ikon, dropdowns, dan mega menu.

Selain itu, kamu juga bisa gunakan <ul> untuk daftar item menu. Berikut kode HTML yang bisa kamu gunakan:

<nav>

  <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#news">News</a></li>

    <li><a href="#contact">Contact</a></li>

    <li><a href="#about">About</a></li>

  </ul>

</nav>

Baca Juga: Panduan Lengkap Cara Membuat Navbar HTML

Untuk mencapai ini, kamu bisa gunakan property text-align pada elemen induk untuk meratakan teks ke tengah. Lalu, kamu juga bisa gunakan display: inline-block atau display: flex untuk item-item menu. 

Pilihan antara menggunakan inline-block atau flex ini bisa bervariasi tergantung kebutuhan dan preferensimu. 

Flex bisa memberikan lebih banyak kontrol dan fleksibilitas untuk penataan layout. Hal ini terutama berlaku untuk responsivitas dan penyesuaian item-item di dalam kontainer.

Berikut adalah kode CSS yang bisa diterapkan apabila kamu menggunakan display: inline-block:

nav ul {

  text-align: center;

  list-style-type: none;

  padding: 0;

}

nav ul li {

  display: inline-block;

  margin-right: -4px; /* Menghilangkan ruang ekstra antar elemen inline-block */

}

nav ul li a {

  display: block;

  padding: 10px;

  text-decoration: none;

}

Lalu, kamu juga bisa gunkana display: flex. Berikut adalah kode CSS yang bisa kamu gunakan:

nav {

  display: flex;

  justify-content: center;

}

nav ul {

  list-style-type: none;

  padding: 0;

  display: flex;

}

nav ul li a {

  display: block;

  padding: 10px;

  text-decoration: none;

}

Untuk melakukan ini, kamu bisa tambahkan media query dalam CSS. Berikut adalah kode CSS yang bisa kamu gunakan:

@media screen and (max-width: 600px) {

  nav ul li {

    display: block;

    text-align: center;

  }

}

Dengan media query tersebut, semua item menu akan ditumpuk secara vertikal dan tetap rata tengah ketika lebar layar kurang dari 600px.

Baca Juga: 7 Tahapan Cara Desain Web dengan CSS

Demikian penjelasan lengkap mengenai cara membuat menu navigasi rata tengah. Dengan cara tersebut, kamu bisa menyesuaikan lebih lanjut dengan menambahkan styling yang sesaui keinginan.

Lebih lanjut, dalam UI/UX menu navigasi ini juga memiliki peran penting dalam meningkatkan estetika dan pengalaman pengguna. Berbicara tentang UI/UX, MinDi punya rekomendasi untuk kamu yang tertarik untuk mendalaminya.

Bagi Sobat MinDi yang tertarik, kamu bisa ikut Bootcamp UIUX/Product Design. Program ini cocok bagi para career-switcher yang baru mulai. Pembelajarannya lengkap dan didasari oleh silabus beginner-friendly.

Di sini, kamu bakal belajar konsep dasar, alat pendukung, hingga praktiknya di real-case project. Intinya, kamu bakal dibimbing sampai jadi! Yuk, segera daftar dan mulai karir yang lebih baik bareng Dibimbing.id!