CSS Eksperimen - 03-1 navigasi dasar

1. Navigasi Dasar
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Navigasi adalah bagian dari sebuah situs. Sebagai cara untuk
berpindah dari halaman satu ke halaman lainnya, navigasi merupakan
elemen yang penting dan harus ada.
Navigasi bisa dihadirkan dalam banyak bentuk dan interaksi dalam
sebuah situs sesuai kreativitas pengguna.

3. Menu Navigasi
Navigasi paling umum adalah ada di bagian atas dari situs. Navigasi ini
bisa di kanan atau kiri dan biasanya bersama dengan logo situs secara
sejajar.
Gambar di atas adalah contoh navigasi yang ada di sebelah kanan dan
berada sejajar dengan logo pada situs Kuliahkita.com

4. Menu Navigasi
Biasanya, menu tersebut tidak hanya seperti yang dilihat. Biasa
terdapat juga menu di dalam menu yang ada seperti dropdown.
Dropdown ini umumnya berisi sub-menu dari menu utama yang ada
pada navigasi sebuah situs.

5. Implementasi Menu & Dropdown
Pertama kita definisikan terlebih dahulu menu apa saja dan sub-
menunya yang disusun dalam tag ul dan li.
HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS

6. Implementasi Menu & Dropdown
Berikan style untuk kelas menu navigasi. Jadikan sebaris dengan
menggunakan style inline dan hilangkan style dari list (list-style).
HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS
.menu-navigasi {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba (0,0,0,0.15);
-moz-box-shadow: 0 0 5px rgba (0,0,0,0.15);
box-shadow: 0 0 5px rgba (0,0,0,0.15);
}

7. Implementasi Menu & Dropdown
Beri style untuk elemen-elemen menunya yang ada dalam tag li dan
buat jadi sebaris (inline-block). Transition akan digunakan untuk
memperhalus animasi dropdown.
HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS
.menu-navigasi li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all -0.2s;
-moz-transition: all -0.2s;
transition: all -0.2s;
}

8. Implementasi Menu & Dropdown
HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS
.menu-navigasi li ul {
font: bold 12px/18px sans-serif;
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all -0.2s;
-moz-transition: all -0.2s;
transition: all -0.2s;
}

9. Implementasi Menu & Dropdown
Definisi style yang ada pada halaman sebelumnya digunakan untuk
dropdown yang merupakan pembungkus sub-menu (tag ul).
Didefinisikan bahwa posisinya akan absolut dari elemen induknya
dengan posisi atas 48px (top: 48px sesuai tinggi menu) dan tanpa
ada pergeseran dari posisi kiri (left:0). Selain itu tidak lupa juga untuk
disembunyikan jika pengguna tidak menunjuk ke menu tersebut
dengan style visibility: hidden.

10. Implementasi Menu & Dropdown
Beri style juga untuk elemen di dalam sub-menu yang dibungkus dalam
tag li terutama kelakuan display block.
HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS
.menu-navigasi li ul li{
font: bold 12px/18px sans-serif;
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}

11. HTML
<nav><ul class="menu-navigasi">
<li>Beranda</li>
<li>Tentang</li>
<li>Produk
<ul><!-- submenu -->
<li>Kategori A</li>
<li>Kategori B</li>
<li>Kategori C</li>
</ul>
</li>
</ul></nav>
CSS
.menu-navigasi li:hover ul{
display: block;
opacity: 1;
visibility: visible;
}
.menu-navigasi li ul li:hover {
background: #777;
}
.menu-navigasi li:hover {
background: #555;
color: white;
}
Implementasi Menu & Dropdown
Sekarang tambahkan kelakuan ketika mouse masuk ke menu sehingga
dapat menampilkan submenu (dibungkus ul).

12. Implementasi Menu & Dropdown
Hasilnya akan tampak seperti pada gambar berikut

13. Finalisasi
Setelah kerangka CSS dan HTML untuk Menu navigasi dengan
dropdown dibuat, Anda bisa mengubah dan menyesuaikannya sesuka
Anda.
Misalkan spasi-nya, warna, font, dll, atau mungkin menambah sub-
menu lainnya.
Contoh dapat dilihat pada Codepen Kuliahkita