Pada kesempatan kali ini saya akan menjelaskan cara membuat efek menu Youtube sederhana, dimana cara tersebut adalah membuat ulang efek menu kecil yang dapat Anda lihat di menu sisi kiri di YouTube saat menonton video (di mana tertulis “Panduan”). Menunya terdiri dari sedikit ikon menu, label dan daftar item menu yang muncul saat label atau ikon menu diklik. Setelah itu klik ikon menu slide ke kanan dan label bergerak ke atas sementara daftar item dapat memudar secara berurutan. Saya akan menambahkan beberapa gaya dan efek lagi padanya agar lebih menarik.

Untuk HTML saya akan menggunakan elemen nav dan di dalamnya teman-teman akan menambahkan div yang akan berisi ikon menu dan labelnya. Saya akan menggunakan daftar unordered untuk item menu tersebut.

Berikut tahapan nya:

1. Buatlah satu buah file dengan nama bebas, sesuai keinginan teman-teman, setelah itu salin kode di bawah ini:

Setiap item menu di atas akan memiliki ikon kecil, jadi saya akan memberi semua kelas yang berbeda untuk nya. Dan ikon yang akan saya gunakan berasal dari IcoMoon dan saya telah membuat ikon khusus yang ditetapkan dengan aplikasinya yang cemerlang.

2. Buatlah stu buah file CSS dengan nama terserah, sesuaikan dengan keinginan teman-teman, selanjutnya salin kode di bawah ini:

Wadah utama nav akan memiliki beberapa gaya yang umum, seperti ukuran huruf, tinggi garis, warna dan dimensi. Dan saya ingin fleksibel tapi saya tidak menginginkannya terlalu besar atau terlalu kecil, jadi saya akan menetapkan lebar maksimal dan minimum seperti kode di atas tersebut.

Pada kode di atas, Pembagian yang berisi ikon menu span dan label link akan diposisikan secara mutlak dan saya akan mengatur kursor tersebut ke “pointer”. Maka diperlukan indeks z tinggi untuk menjamin bahwa daftar tidak beraturan dan tidak tetap di atasnya.

Pada kode di atas, Ikon menu span akan diposisikan secara mutlak dan saya akan memberikannya sebuah transisi.

Pada kode di atas, saat teman-teman klik di trigger division, teman-teman akan memberi kelas yang disebut “dr-menu-open” ke nav. Ikon menu kemudian akan meluncur ke kiri dan saya juga akan menerjemahkannya untuk ukurannya sendiri sehingga diletakkan kembali dengan baik tanpa tumpah.

Begitu saya membuka menu tersebut, saya menginginkannya terlihat, berikut tambahkan kode seperti di bawah ini:

Label, yang merupakan anchor di HTML kami, akan mendapatkan beberapa gaya umum dan saya akan memberikannya padding sehingga berada di samping ikon menu tersebut. Saya juga akan menambahkan transisi karena saya ingin menghidupkannya, begitu saya membuka menu, yang akan saya lakukan dengan menerjemahkannya di sumbu Y, seperti kode di bawah ini:

Daftar unordered awalnya tidak terlihat dengan memiliki opacity 0, seperti kode di bawah ini:

Saat saya membuka menu yang di inginkan agar terlihat dan indeks z tinggi sehingga div pemicu tidak menutupinya, berikut seperti kode di bawah ini:

 

Kedua transisi tersebut untuk membuka dan menutup menu. Saat kita membuka menu, kita ingin segera tampil tanpa penundaan dan saat kita menutupnya, misalkan keluarkan kelas, kita menginginkan hal itu terjadi dengan penundaan. Keterlambatan tersebut ditentukan oleh penundaan item terakhir dalam daftar, seperti yang akan kita lihat segera.

Item daftar juga tidak terlihat dan kami akan mengatur transisi untuk opacity:

Sekarang, setiap item daftar akan muncul dengan penundaan yang berbeda: item pertama akan memudar segera dan item terakhir akan muncul pada akhirnya:

Tautan akan memiliki beberapa padding dan kami akan menetapkannya sebagai inline-blocks:

Dan kita akan mengubah warna pada hover:

Terakhir, namun tidak sedikit, mari kita definisikan ikon pseudo-elements:

3. sisipkan kode javascript di bawah ini ke dalam file HTML, yang sebelumnya sudah teman-teman buat:

Sampai di sini penjelasan saya cara membuat efek menu Youtube sederhana, semoga bermanfaat.