CSS Eksperimen - Slide Side Menu

1. Slide Side Menu
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Pada bahasan sebelumnya telah Kita lihat cara membuat menu
navigasi dan breadcrumb.
Kali ini kita akan mencoba membuat slide side menu seperti yang biasa
ditemukan di smartphone.
Menu ini bisa ditrigger dengan klik untuk menampilkan list menu yang
ada.

3. Menu Navigasi
Navigasi ini bisa kita munculkan dari arah manapun baik atas, kiri,
bawah, maupun kanan.
Dengan mengetahui konsep ini, Anda juga bisa berkreasi seperti
membuat overlay menu, dll.

4. Implementasi Slide Side Menu
Pertama kita buat hamburger icon terlebih dahulu yang menjadi tempat
user men-trigger menu untuk ditampilkan. Pada tahap ini, akan
terbentuk sebuah kotak penampung Hamburger Icon
HTML
<div class="burger">
<!-- 3 span sebagai 3 garis -->
<span></span>
<span></span>
<span></span>
</div>
CSS
.burger {
z-index: 20;
width: 50px; height: 50px;
background-color: #d3531a;
right: 0; top: 50px;
position: fixed;
cursor: pointer;
transition: .5s ease-in-out;
}

5. Implementasi Slide Side Menu
Hasilnya akan seperti gambar berikut:
→ Terbentuk sebuah kotak kecil di pojok kanan atas menu sesuai

6. Implementasi Slide Side Menu
Kemudian Kita atur cara menampilkan garis di hamburger icon dengan
posisinya serta style pemanis lainnya.
HTML
<div class="burger">
<!-- 3 span sebagai 3 garis -->
<span></span>
<span></span>
<span></span>
</div>
CSS
.burger span{
display: block;
position: absolute;
height: 3px;
width: 70%;
background: white;
border-radius: 9px;
opacity: 1;
left: 15%;
transition: .5s ease-in-out;
}

7. Implementasi Slide Side Menu
HTML
<div class="burger">
<!-- 3 span sebagai 3 garis -->
<span></span>
<span></span>
<span></span>
</div>
CSS
.burger span:nth-child(1) {
top: 13px;
}
.burger span:nth-child(2) {
top: 23px;
}
.burger span:nth-child(3) {
top: 33px;
}
Lalu, buat posisi ketiga garis supaya ada di dalam kotak tersebut.
Pada tahap ini, Hamburger icon telah berhasil dibuat.

8. Implementasi Slide Side Menu
Hasilnya akan seperti gambar berikut:
→ Pada kotak tersebut, ada 3 garis yang telah dibuat sesuai style

9. Implementasi Slide Side Menu
HTML
<header>
<nav class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav><!-- /push menu right -->
</header>
Tahap berikutnya, kita definisikan
menu yang akan ditampilkan.
Kita bisa tambahkan kode HTML
tersebut sebelum kode Hamburger
Icon.

10. Implementasi Slide Side Menu
Sekarang, akan kita beri style pada menu ini. Style di atas akan
menyembunyikan menu di samping kanan. Selain itu dipasang style
transform untuk nanti membantu menampilkan menu ini dengan trigger
click.
HTML
<header>
<nav class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav><!-- /push menu right -->
</header>
CSS
.main-navigation {
z-index: 20;
position: fixed;
top: 0; right: 0;
width: 30%; height: 100%;
background: #222;
text-align: center;
transform: translateX(100%);
transition: .5s ease-in-out;
}

11. Implementasi Slide Side Menu
HTML
<header>
<nav class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav><!-- /push menu right -->
</header>
CSS
.main-navigation ul {
margin: 0;
padding: 20;
list-style: none;
}
.main-navigation ul a {
padding: 10px 20px;
display: block;
color: #fff;
text-decoration: none;
}
.main-navigation ul a:hover {
background: #333;
}
Tambah sedikit style untuk menu supaya lebih interaktif.

12. Implementasi Slide Side Menu
Hasilnya akan seperti gambar berikut:
→ Menu yang kita buat akan tampak seperti gambar berikut, tetapi
tersembunyi di samping layar.

13. Implementasi Slide Side Menu
HTML
<header>
<nav class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav> <!-- /push menu right -->
</header>
CSS
.menu-open {
transform: translateX(0%);
}
.open {
// menggeser sebanyak lebar menu
right: 30%;
}
Tambah kelas menu-open dan open. Kelas ini berfungsi sebagai
toggle-class yang merupakan trigger klik pengguna.
Kelas ini akan menampilkan dan menyembunyikan menu yang ada.

14. Implementasi Slide Side Menu
Javascript ini akan menggunakan jquery.
● Ketika elemen dengan kelas burger diklik (hamburger icon), maka
akan menambah kelas open pada elemen dengan kelas burger
yang menggeser burger sebesar lebar menu.
● Sedangkan elemen dengna kelas main-navigation akan diberi
kelas menu-open yang juga akan menggeser menu
Javascript (JQuery)
$('.burger').on('click', function() {
$(this).toggleClass(‘open’);
$(‘.main-navigation’).toggleClass(‘menu-open’);
});

15. Implementasi Slide Side Menu
Konsep yang dipakai adalah toggle class, jadi ketika untuk klik
pertama, javascript (jquery) akan menambah kelas yang mengubah
elemen-elemen yang terlibat. Kemudian untuk klik kedua kalinya,
kelas yang ditambah akan dihilangkan untuk mengembalikan ke
keadaan semula.
Javascript (JQuery)
$('.burger').on('click', function() {
$(this).toggleClass(‘open’);
$(‘.main-navigation’).toggleClass(‘menu-open’);
});

16. Implementasi Slide Side Menu
Hasil akhirnya akan seperti gambar berikut:
→ Menu yang kita buat akan tampak seperti gambar berikut ketika
hamburger icon telah diklik untuk menampilkan menu yang
tersembunyi di sisi layar.

17. Finalisasi
Setelah Menu navigasi slide dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Misalkan spasi-nya, warna, font, dll, atau mungkin menambah menu
lainnya. Bisa juga dimodifikasi supaya menu tampil dari atas atau kiri
layar.
Contoh dapat dilihat pada Codepen Kuliahkita