CSS Eksperimen - 03-3 Slide Side Menu

CSS Eksperimen - 03-3 Slide Side Menu

• 1.
  Slide Side Menu EksperimenCSS Kuliahkita - Georgius Rinaldo [email protected]
• 2.
  Pendahuluan Pada bahasan sebelumnyatelah 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 inibisa 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 SideMenu 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 SideMenu Hasilnya akan seperti gambar berikut: → Terbentuk sebuah kotak kecil di pojok kanan atas menu sesuai
• 6.
  Implementasi Slide SideMenu 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 SideMenu 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 SideMenu Hasilnya akan seperti gambar berikut: → Pada kotak tersebut, ada 3 garis yang telah dibuat sesuai style
• 9.
  Implementasi Slide SideMenu 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 SideMenu 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 SideMenu 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 SideMenu Hasilnya akan seperti gambar berikut: → Menu yang kita buat akan tampak seperti gambar berikut, tetapi tersembunyi di samping layar.
• 13.
  Implementasi Slide SideMenu 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 SideMenu 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 SideMenu 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 SideMenu 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 navigasislide 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