Pure CSS Burger Menu - Pada tutorial kali ini saya akan menjelaskan Cara membuat Menu Responsive dengan icon Burger pure CSS tanpa JavaScript. Mungkin anda sering melihat Menu navigasi ketika menggunakan media kecil seperti HP muncul Garis Tiga , itulah yang dinamakan icon Burger, ya kalau diperhatikan mirip hamburger.
Tutorial ini merupakan kelanjutan dari tutorial sebelumnya Step By Step Memahami Pembuatan Menu Dropdown. Jadi silahkan ikuti dulu tutorial tersebut dan kita akan lanjutkan membuat menu tersebut menjadi responsive (Silahkan download sourcenya untuk mempelajarinya). Oke kita lanjutkan ke langkah berikutnya.
Menambah Icon Burger
Setelah kita membuat menu Dropdown seperti ini, kita akan menambahkan icon toggle nya berupa icon burger. Tambahkan HTML ini sebelum header.
<input type="checkbox" class="openMenu" id="openMenu"/>
<label for="openMenu" class="ToggleIcon">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>Tambahkan CSS ini
/* Toggle Icon Burger) */
.ToggleIcon {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 27px; /* jarak icon burger dari atas */
right: 27px; /* jarak icon burger dari kanan */
height: 22px; /* sesuaikan ukuran */
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
display:block;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}Kemudian, supaya diklik menjadi silang (X) maka tambahakan lagi dibawahnya CSS ini :
/* Efek icon burger berganti menjadi silang */
input[type=checkbox]:checked ~ .ToggleIcon > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .ToggleIcon > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
input.openMenu {
position: fixed;
top: -100px;
opacity: 0
}Nah, sampai di sini, icon akan muncul di kanan atas, tapi ketika diklik belum memberikan efek apa pun terhadap menu, hanya memunculkan dulu icon.
Lihat HasilMenyembunyikan Icon Burger
Setelah icon kita buat, maka sekarang kita akan sembunyikan dan nanti akan dimunculkan pada layar berukuran kecil, tergantung kita seting di media queries berpa px. Tambahkan CSS ini :
/* Sembunyikan Icon Burger */
label.ToggleIcon {
display: none;
}Untuk melihat efeknya, silahkan resize window. Icon sebetulnya ada, tapi sementara kita sembunyikan.
Lihat HasilMenampilkan Icon dan Menu Horizontal
Sekarang kita akan munculkan icon burger, sekaligus menghilangkan menu Horizontal berganti menjadi Vertikal. Saya set di media queries 960px, silahkan atur sesuai keinginan. Tambahkan CSS ini :
/* Pada ukuran layar 960px mulai pengaturan Responsive */
@media screen and (max-width:960px){
#menu {
display:none; /* menu horizantal disembunyikan */
}
label.ToggleIcon {
display:block; /* burger icon dimunculkan */
}
/* Merubah menu menjadi vertikal ketika Burger icon diklik*/
input[type="checkbox"]:checked ~ #menu {
display: block;
width: 100%;
background: #777;
position: fixed;
top: 70px;
left: 0;
height: 100vh;
overflow-y: visible;
padding: 10px 0 0 0;
scrollbar-width: none;
scrollbar-width: none;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 9999;
}
input[type="checkbox"]:checked ~ #menu li {
position: relative;
margin:0;
display: block;
text-align: left;
float:none;
}
input[type="checkbox"]:checked ~ #menu ul.menus{
height:auto;
overflow:hidden;
width:100%;
background:#666;
position:relative;
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}Silahkan lihat hasilnya, supaya efeknya terlihat silahkan resize window.
Lihat HasilMenambah Efek Slide in
Pada hasil di atas, munculan menu vertikal masih terasa kasar, kita akan haluskan dengan pergeseran menu dari sebelah kiri. Tammbahkan CSS ini:
/* Memberikan efek slide muncul dari kiri */
@-webkit-keyframes slideInLeft {
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
}Sampai sini, kita telah selesai membuat menu Responsive murni CSS tanpa Java Script.
Manambahkan Background Overlay
1. Edit width:100% pada CSS diatas (boleh menggunakan % atau px, saya menggunakan ukuran width:230px
input[type="checkbox"]:checked ~ #menu {
display: block;
width: 100%;
..........2. Tambahkan CSS ini
#overlay{
display: block;
position: fixed;
top: 70px;
left: -50%;
right: -50%;
bottom: -50%;
z-index: 1;
transition: all .1s ease;
background: transparent;
opacity: 0;
visibility: hidden;
}
input[type="checkbox"]:checked ~ #overlay {
opacity: 1;
visibility: visible;
background: rgba(0,0,0,.2);
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(5px);
}3. Simpan kode ini di bawah </nav>
<div id="overlay"></div>Kalau masih ada masalah silahkan share di kolom komentar...