Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Jade
Code

Membuat Menu Drop-Down untuk Halaman Seluler

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Tutorial ini akan mengajari Anda cara membuat dan menganimasikan ikon menu hamburger dan kemudian melampirkan event listener melalui jQuery untuk melakukan proses trigger pada menu drop-down.

Saya akan menggunakan Jade (Pug) dan Sass dari pada menggunakan vanilla HTML dan CSS. Jadi Anda setidaknya harus memiliki pengetahuan dasar tentang template engine ini.

Menciptakan Arena Bermain

Kami akan mulai dengan implementasi area bermain yang sederahana. Saya hanya akan menyediakan template Jade bersama dengan styling menggunakan Sass, karena ini bukan ruang lingkup dari tutorial. Anda dapat mengambil dan menggunakannya atau Anda dapat memanipulasi dengan desain Anda sendiri.

File Jade:

File Sass:

Catatan: Di sini saya membuat dua mixin yang bernama flex dan transition. Mixins mempermudah penggunaan kembali beberapa aturan CSS dengan mengelompokkan mereka. Setiap kali saya perlu menambahkan display:flex dengan semua awalan vendor, sebagai gantinya saya bisa menggunakan +flex(), ini berkat adanya mixin.

Kami akan menggunakan struktur ini dan membangunnya untuk sisa tutorial.

Hasil akhir akan terlihat seperti ini:

Playground

Lihat kode saat ini

Ikon Hamburger Menu 

Sekarang saatnya untuk membuat menu hamburger sederhana namun menarik dan menghidupkannya melalui CSS.

Tambahkan div baru didalam #header dan berikan nama #hamburger. Kemudian membuat dua div children di dalam #hamburger. Mereka harus memiliki class yang umum dan ID yang bersifat individu.

Sekarang kita perlu memberi style pada parent div #hamburger dan div children dengan class umum .strip.

Kami mengatur tinggi div sama dengan parent div, yaitu #header, dengan menentukan height:100%. Juga, kami menetapkan nilai lebar untuk div parent ini, yang akan menentukan wilayah "yang dapat diklik".

Selanjutnya, kami menambahkan flexbox dengan semua awalan vendor dengan menggunakan mixin, yang kami buat sebelumnya.

Karena kami ingin div .strip kami diposisikan secara vertikal, kami menetapkan flex-direction: column dan kemudian menggunakan justify-content: space-between untuk menempatkan spasi di antara div .strip.

Kemudian kita perlu mendorong div tersebut terhadap satu sama lain dengan menambahkan padding bawah dan atas ke div masing-masing.

Kami juga menambahkan padding-left: 20px untuk memindahkan div .strip lebih jauh ke kanan.

Hal berikutnya adalah menambahkan style pada strip. Ini relatif mudah dengan hanya mendefinisikan ukuran dan warna dari div.

Hasil akhir dengan ikon menu hamburger akan terlihat seperti ini:

Hamburger Menu Icon

Hal berikutnya adalah menganimasikan ikon menu sehingga ketika diklik, seharusnya akan melakukan animasi menjadi tanda silang.

Membuat Animasi untuk ikon Menu Hamburger

Pada tahap ini, kita akan menggunakan jQuery dasar untuk beralih ke beberapa classs CSS.

Pertama mari kita buat class CSS yang akan diubah.

Kita akan menggunakan utilitas translate dan rotate dari properti transform CSS bersama dengan properti transition.

Pertama, tambahkan transisi ke div #top dan #bottom dengan menggunakan mixins dengan parameter timing tertentu.

Sekarang kita perlu mendefinisikan style dari class yang akan dilakukan proses toggle.

Kami akan melakukan proses rotate dan translate dari masing-masing .strip div secara individual, jadi kami perlu mengubah class yang berbeda baik untuk div #top dan #bottom.

Di sini kita mendefinisikan styling untuk dua kelas yang berbeda bernama .bottomRotate dan .topRotate, yang akan ditambahkan dan dihapus dari div referensi masing-masing, #top dan #bottom.

Perhatikan bahwa ukuran yang berbeda dari kelas .strip akan menghasilkan kebutuhan untuk nilai translateY dan rotateZ yang berbeda untuk melakukan animasi menjadi tanda silang yang tepat.

Class Toggling Dengan jQuery

Kami mendefinisikan bagaimana setiap .strip div akan melakukan animasi ketika class topRotate dan bottomRotate hadir. Namun, kami belum melampirkan event listener untuk melakukan proses toggle terhadap class tersebut.

Buatlah file JavaScript baru dan gunakan kode berikut untuk mengaktifkan class topRotate dan bottomRotate ke div dengan ID #top dan #bottom masing-masing.

Kami menyimpan semua kode kami di dalam $(document) .ready(function() { ... }) untuk menunggu seluruh halaman dimuat sebelum mengambil tindakan apa pun.

Ketika kita klik div #hamburger, itu akan mengalihkan class untuk div dengan ID khusus.

Catatan: Jangan lupa untuk menambahkan sumber file jQuery ke dalam proyek Anda.

Lihatlah kode saat ini

Membuat Daftar Menu

Langkah selanjutnya adalah membuat menu dengan daftar item.

Gunakan struktur berikut di bawah #header:

Jadi di sini kami menggunakan tag ul sebagai induk untuk mengelompokkan item dengan li tag sebagai children. Selain itu, untuk membuat animasi background yang meluas, kami juga menambahkan div dengan ID #background.

Mari kita styling element ul dan li terlebih dahulu.

Mengatur list-style menjadi none untuk menghapus style bullet dari elemen ul dan juga mengatur padding dan margin ke 0 untuk menghapus semua nilai yang telah ditentukan.

Sekarang mari kita styling elemen li:

Di sini saya memberikan komentar menjadi display:none agar bisa melihat hasilnya. Namun, ketika proses animasi, kami akan menggunakan kondisi awal yaitu menyembunyikan elemen list.

Saya juga menambahkan pseudo-element after dan memberikan style pada element tersebut untuk memisahkan setiap element li agar sesuai dengan garis lurus. :last-child:after menghapus baris ini untuk elemen li yang terakhir.

Lihatlah kode saat ini

Membuat Animasi pada List Menu

Sekarang kita akan menggunakan beberapa control directive pada Sass untuk menambahkan animasi CSS keyframe dengan atribut yang berbeda pada setiap element li.

Di sini kami mendefinisikan animasi keyframe dengan nama drop and fold.

drop adalah untuk memberikan animasi saat pembukaan list menu. Skala awal adalah 30% lebih, dan skala akan kembali ke ukuran semula ketika transparansi berjalan dari 0 hingga 1. Tindakan sebaliknya terjadi dalam fold.

Sekarang kita perlu melampirkan keyframe tersebut ke elemen li. Pada bagian ini menggunakan Sass menjadi sangat berguna.

Di sini saya menggunakan for loop yang berjalan dari 1 hingga 6 dengan index $i.

Sekarang kita perlu menggunakan index tersebut untuk melampirkan setiap animasi ke elemen li dengan durasi yang berbeda.

Pertama, perhatikan baris li.anim:nth-child(#{$i}).

Di sini kita meraih variabel $i selector th child dari elemen li dengan class anim.

Kami akan mengubah class anim ini. Jadi, ketika ditambahkan ke elemen li, keyframe animasi dengan nama drop akan mengambil tindakan. Ketika dihapus, animasi fold yang akan mengambil tindakan.

Hal penting berikutnya adalah atribut duration.

duration: 100ms*$i untuk animasi drop memperpanjang durasi animasi untuk setiap nomor yang bertambah. Jadi, ketika kode ini dikompilasi, li yang pertama akan memiliki duration: 100ms, dan untuk li terakhir akan memiliki duration: 600ms.

Ini akan memberikan animasi pada setiap elemen satu demi satu.

Kami melakukan hal yang sama untuk animasi fold. Kali ini, elemen terakhir harus memiliki animasi yang lebih cepat, maka durasinya menjadi duration: 80ms*(6-$ i) + 1ms. 1ms ditambahkan ke durasi karena fakta bahwa ketika Anda mengatur durasi ke 0, beberapa masalah mungkin terjadi, dan animasi Anda mungkin tidak berfungsi dengan baik.

Saat kami melakukan styling elemen li, saya menyebutkan bahwa kami perlu menggunakan display:none untuk menghindari pemutaran animasi yang tidak diinginkan. Jika Anda tidak mengaturnya menjadi none, Anda akan melihat bahwa animasi fold dijalankan sekali ketika halaman dimuat.

Jika kita mengatur properti display ke none, kita tidak akan melihat itu, dan kemudian kita perlu menunjukkan elemen li sebelum beralih menjadi class anim.

Kami ingin animasi dimainkan saat kami mengeklik ikon hamburger. Jadi mari kita gunakan beberapa jQuery untuk mengatur properti display dari setiap item li menjadi bernilai block dan juga mengganti class anim.

Lihatlah kode saat ini

Anda akan melihat bahwa kita dapat melihat animasi pada masing-masing elemen li secara individual. Namun, kami lebih suka jika menu menjadi meluas.

Untuk memperbaikinya, kita hanya perlu memperluas ketinggian div. Div itu adalah #background, yang awalnya kami tambahkan saat membuat elemen ul dan li.

Kami akan mengubah class expand untuk mengatur atribut height ke 550px dalam .45s. Perhatikan bahwa saya menggunakan transition mixin untuk menentukan transisi dengan parameter waktu tertentu.

Hasil Akhir

Kesimpulan

Sepanjang tutorial ini, kami berlatih bagaimana menggunakan loop dalam HTML dan CSS melalui template engine Jade dan Sass. Selain itu, kami membuat animasi CSS keyframe dan melampirkannya dengan atribut durasi yang berbeda untuk elemen HTML tertentu. Lalu kami menukar kelas dengan jQuery untuk mengontrol animasi tersebut.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.