CSS Eksperimen - 05-2 Popup Menu

Context /
Pop-Up Menu
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

Pendahuluan
Pada materi sebelumnya, dibahas mengenai pop-up yang berupa
konfirmasi dengan menggunakan javascript.
Pada materi kali ini, Kita akan mencoba membuat pop-up menu
dengan sebuah penanda class kosong untuk jquery mengetahui state
dari elemen dan Kita coba pakai fungsi jquery yang ada.

Implementasi Pop-up Menu - 1
HTML
<div class="menu">
<div class="field">Menu</div>
<ul class=”list”>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
</ul>
</div>
Seperti materi-materi sebelumnya, seperti
biasa. Kita akan buat kerangkanya di
HTML terlebih dahulu.
Pertama kita buat “bungkusnya” atau
containernya terlebih dahulu yaitu div
dengan kelas menu.
Lalu terdapat sebuah elemen yang
menjadi area klik yaitu menu dengan
kelas field dan submenunya dalam
sebuah list.

CSS
body {
margin: 30px;
font-family: “Lato”, sans-serif;
color: #333;
background-color: #333;
}
Jika Anda mencoba membuatnya dengan
aplikasi seperti web app codepen,
jsfiddle, dll, Anda bisa menambah style
umum supaya hasil lebih terlihat seperti
yang dibuat pada CSS di samping.
Tetapi jika Anda hanya ingin menambah
atau memodifikasi dengan style Anda
sendiri, Anda bisa mendefinisikannya
sesuka Anda tanpa mengikuti tahap ini.

CSS
.menu {
position: relative;
}
.menu .field{
width: 200px;
background: #477A5A;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
font-size: 1em;
border: solid 1px #477A5A;
transition: all .2s ease-in-out;
}
Pertama Kita akan berikan style pada
menu yang merupakan container dan field
yang merupakan area trigger dari menu
untuk menampilkan sub-menu yang ada.

CSS
.menu .field:hover{
border: solid 1px #fff;
box-shadow: 0 0 5px #999;
}
.menu > ul.list{
display: none;
position: absolute;
left: 0; top: 40px;
z-index: 999;
width: 300px;
margin: 0; padding: 10px;
list-style: none;
background: #6BB586; color: #333;
box-shadow: 0 0 3px #999;
}
Kita bisa tambahkan style interaksi ketika
area trigger dihover.
Lalu tambahkan juga style untuk list menu
yang akan disembunyikan ketika user
tidak klik dengan posisi absolute, 40 pixel
sesuai tinggi menu dari atas dan rapat kiri
(left: 0).

CSS
.menu > ul.list li:hover {
background: rgba(255,255,255,0.3);
color: #42614D;
}
.menu > ul.list li:last-child{
border: none;
}
Kita juga tambahkan style untuk elemen
sub-menunya supaya lebih interaktif.
Ketika dihover, submenu akan ter-
highlight.
Hilangkan border yang ada di elemen
terakhir dari list sub-menu.

Javascript (JQuery)
$(document).ready(function($) {
$('.field).on('click', function(event) {
var list = $('.list');
if(!list.hasClass('visible')) {
list.hasClass('visible');
list.fadeIn(400);
} else {
list.removeClass('visible');
list.fadeOut(400);
}
}
});
Javascript yang diimplementasikan dapat
dilihat pada kode di kiri.
Kita mencoba menggunakan penanda
yaitu kelas visible dan fungsi bawaan
jQuery yaitu fadeIn dan fadeOut.
Pertama script akan mendeteksi klik dan
mengambil elemen list. Lalu akan
diperiksa apakah elemen list sudah tampil
(memiliki kelas visible), jika tidak, maka
tambahkan dan animasi fadeIn sehingga
muncul, dan sebaliknya.

Finalisasi
Setelah pop-up menu selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Contoh dapat dilihat pada Codepen Kuliahkita

CSS Eksperimen - 05-2 Popup Menu

More Related Content

What's hot

Viewers also liked

More from KuliahKita

Recently uploaded

CSS Eksperimen - 05-2 Popup Menu