CSS Eksperimen - 03-3 Slide Side Menu

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

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.

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.

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">

<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;
}

Hasilnya akan seperti gambar berikut:
→ Terbentuk sebuah kotak kecil di pojok kanan atas menu sesuai

Kemudian Kita atur cara menampilkan garis di hamburger icon dengan
posisinya serta style pemanis lainnya.
HTML
<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%;
}

HTML
<span></span>
<span></span>
<span></span>
</div>
CSS
.burger span:nth-child(1) {
top: 13px;
}
top: 23px;
}
top: 33px;
}
Lalu, buat posisi ketiga garis supaya ada di dalam kotak tersebut.
Pada tahap ini, Hamburger icon telah berhasil dibuat.

→ Pada kotak tersebut, ada 3 garis yang telah dibuat sesuai style

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>
</header>
Tahap berikutnya, kita definisikan
menu yang akan ditampilkan.
Kita bisa tambahkan kode HTML
tersebut sebelum kode Hamburger
Icon.

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>
<ul>
</ul>
</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%);
}

HTML
<header>
<ul>
</ul>
</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.

→ Menu yang kita buat akan tampak seperti gambar berikut, tetapi
tersembunyi di samping layar.

HTML
<header>
<ul>
</ul>
</nav> 
</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.

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’);
});

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’);
});

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.

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

CSS Eksperimen - 03-3 Slide Side Menu

More Related Content

Similar to CSS Eksperimen - 03-3 Slide Side Menu (8)

More from KuliahKita (20)

Recently uploaded (20)

CSS Eksperimen - 03-3 Slide Side Menu