Membuat Menu Berada di Tengah Navbar

Kali ini saya barusan belajar membuat navigation bar (navbar) sederhana dimana menunya berada di tengah (center). Memang sudah banyak tutorial yang saya baca untuk membuat navbar ini. Hanya saja saya menemukan beberapa kendala yang tidak saya inginkan. Akhirnya setelah saya menggabung-gabungkan beberapa solusi yang saya temukan, saya berhasil membuat navbar sederhana sesuai keinginan saya.
Jadi navbar yang saya inginkan seperti ini:

Panjang navbar selebar layar
Menu-menunya berada tepat di tengah
Tinggi navbar menyesuaikan tinggi dari menunya (termasuk padding dari menu)

Kurang lebih tiga syarat itu yang harus terpenuhi untuk membuat navbar sederhana sesuai yang saya inginkan.

Oiya, ini cuman pakai HTML dan CSS. Dan tanpa efek aneh2. Namanya juga "navbar sederhana". :D

Oke, begini caranya:

1. Buat file HMTL yang body nya berisi:

<div class="navbar">
<li><a href="#">Satu</a></li>
<li><a href="#">Dua</a></li>
<li><a href="#">Tiga</a></li>
</div>

Dari kode di atas, div dengan class bernama navbar tsb bakalan jadi navbar nya yang sepanjang page.
Lalu tag <li> bakalan yang membuat menu-menunya ada di tengah. Lalu tag <a> bakalan yang menentukan tinggi dari navbarnya.
Kenapa harus ada <a> di dalam <li> ? Karena kalau cuma pakai <li>, dia tidak bisa diklik :D

2. CSS untuk membuat layout jadi full page

*{
margin: 0;
font-family: 'Lucida Sans', sans-serif;
}

Tanda bintang ( * ) itu maksudnya untuk semua elemen yang ada. Jadi kode tsb membuat semua elemen yang ada memiliki margin 0, dan font family 'Lucida Sans', sans-serif. Elemen yang dimaksud termasuk hmtl maupun body.
Sebenarnya, kalau ingin membuat full page cukup html sama body yang dibuat margin 0. Tapi kan lebih cepet ngetik bintang ( * ) kan. Biar cepet aja. LOL.
Kalau margin dari html dan bosy tidak dibuat 0, maka di bagian atas, bawah, kanan, dan kiri dari halaman akan ada sedikit space kosong. Kan jadi kurang sip.

Dari langkah ini, target pertama saya (Panjang navbar selebar layar) terselesaikan.

3. CSS navbar dan isinya

.navbar {
overflow: hidden;
background-color: #333;
text-align: center;
}

.navbar li{
display: inline-block;
list-style-type: none;
}

.navbar li a {
float: left;
color: #f2f2f2;
padding: 17px 35px;
text-decoration: none;
font-size: 17px;
margin-bottom: -8px;
}

.navbar li a:hover {
background: #ddd;
color: black;
}

Oke, begini penjelasannya.

Untuk memenuhi target kedua (Menu-menunya berada tepat di tengah), yang diperlukan adalah

text-align: center; di .navbar
display: inline-block; di .navbar li

Dua kode CSS tersebut harus dipakai supaya menu-menu yang menggunakan tag <li> bisa berada di tengah-tengah navbar.

Kemudian untuk memenuhi target ketiga (Tinggi navbar menyesuaikan tinggi dari menunya (termasuk padding dari menu)), yang diperlukan adalah

overflow: hidden; di .navbar
float: left; di .navbar li a
margin-bottom: -8px; di .navbar li a

Jadi overflow pada kode tersebut berhubungan dengan margin-bottom dari a. Karena margin diberi nilai negatif, maka tinggi navbar akan mengikutinya. Jadi bakalan lebih pendek. Padahal paddingnya bisa lebih dari navbar. Jadi intinya overflow itu untuk mengakali supaya kelebihan padding dari a bisa disembunyikan.

Sedangkan float digunakan karena kalau tidak pakai float, maka tinggi dari menu tidak bisa merubah tinggi navbar. Jadi navbar hanya mengikuti tinggi dari a saja tanpa mengikuti padding dan margin dari a.

Berikut saya sertakan beberapa contoh hasilnya:

- Tanpa overflow