CSS Eksperimen - 03-3 Slide Side Menu

Slide Side Menu

Eksperimen CSS

Kuliahkita - Georgius Rinaldo

[email protected]

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


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

}


HTML


</div>

CSS

.burger span:nth-child(1) {top: 13px;

}


}


}

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>

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;

}


HTML



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


</ul></nav> 

</header>

CSS

.menu-open {transform: translateX(0%);

}

.open {// menggeser sebanyak lebar menuright: 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

http://codepen.io/kuliahkita/pen/ogwrgR

CSS Eksperimen - 03-3 Slide Side Menu

Engineering

Transcript of CSS Eksperimen - 03-3 Slide Side Menu