Cara Membuat Menu Ikon Melingkar yang Melebar Saat Klik di Divi

Menu ikon melingkar adalah solusi elegan untuk menambahkan menu sederhana ke situs Divi Anda. Gaya menu ini intuitif dan berfungsi sangat baik sebagai menu tetap untuk perangkat seluler Anda. Hari ini, kami akan menunjukkan cara membuat menu ikon melingkar di Divi dengan cara yang benar-benar menonjolkan kemampuan desain yang kuat dari Divi Builder. Dan kami akan memberikan cuplikan JavaScript yang mudah untuk membuka dan menutup menu saat diklik.

Mari kita mulai

Sneak Peek

Berikut ini adalah sekilas tentang menu ikon lingkaran yang akan kita buat.

Unduh Tata Letak Menu Ikon Lingkaran GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Divi Theme yang terpasang (atau Plugin Divi Builder jika tidak menggunakan Divi Theme).
2. Buat halaman baru di WordPress dan aktifkan Divi Builder untuk mengedit halaman di ujung depan (pembuat visual).

Untuk tutorial ini, kita akan menggunakan ikon bawaan Divi dari modul uraian, jadi tidak perlu aset eksternal apa pun.

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1

Setelah Divi Builder diaktifkan untuk mengedit halaman di ujung depan, tambahkan satu baris kolom ke bagian reguler default.

Kemudian buka pengaturan baris dan tambahkan padding berikut:

Padding: 300px atas

Ini hanya untuk memberikan beberapa ruang agar item menu melingkar muncul saat diklik.

Membuat Ikon Menu dengan Modul Blurb

Blurb #1

Setelah padding baris terpasang, tambahkan modul uraian ke kolom. Ini akan menjadi yang pertama dari 5 uraian total yang akan kami tambahkan untuk membuat menu ikon melingkar kami. Kami akan merujuk yang ini sebagai uraian #1.

Kemudian perbarui konten uraian dengan menghilangkan judul dan teks isi. Kemudian tambahkan ikon ke uraian sebagai berikut.

Gunakan Ikon: Ya
Ikon: lihat tangkapan layar

Selanjutnya, kita akan memperbarui pengaturan desain sebagai berikut:

Warna Ikon: #29a1f2
Ikon Lingkaran: YA
Warna Lingkaran: #222222
Tampilkan Batas Lingkaran: YA
Warna Batas Lingkaran: #29a1f2
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 25px
Ukuran Teks Tubuh: 20px
Margin: 0px

Selain menata ikon melingkar, kami juga menambahkan ukuran teks isi. Tidak ada teks isi, tetapi ini akan berguna nanti setiap kali kita menggunakan satuan panjang em (yang relatif terhadap ukuran teks isi induk) untuk mengosongkan item menu/blur menggunakan transform translate. Lebih lanjut tentang ini nanti.

Setelah itu, keluarkan animasi gambar/ikon default.

Gambar/Ikon Animasi: Tanpa Animasi

Kemudian atur Indeks Z untuk modul ini ke 1 sehingga akan duduk di atas yang lain yang pada akhirnya akan duduk di belakangnya.

Indeks Z: 1

Dan akhirnya, keluarkan margin bawah default di bawah ikon dengan menambahkan CSS khusus berikut ke Gambar Blurb.

margin-bottom: 0px;

Blurb #2

Untuk membuat uraian kedua, cukup duplikat uraian #1.

Kemudian buka pengaturan untuk blurb baru (blurb #2) dan ubah ikon dan atur Z Index kembali ke default (0).

Setelah itu, mari kita mengecilkan ikon menggunakan skala transformasi sebagai berikut:

Skala Transformasi: 70%

Membuat Blurb #3, #4, dan #5

Tiga uraian berikutnya dapat dibuat dengan menduplikasi uraian #2 dan memperbarui ikon untuk masing-masing uraian.

Susun Blurb di Posisi Absolut yang Sama

Status default menu kita akan memiliki semua uraian dalam posisi absolut dengan empat uraian item menu yang ditumpuk di belakang uraian ikon menu hamburger utama. Untuk mendapatkan uraian kami di posisi absolut yang sama, gunakan fitur multiselect (tahan ctrl/cmd dan klik masing-masing) untuk memilih kelima modul uraian. Kemudian buka pengaturan untuk salah satu uraian yang dipilih untuk memperbarui pengaturan elemen untuk semua 5 secara bersamaan.

Kemudian tambahkan CSS khusus berikut ke elemen utama:

position: absolute !important;
bottom: 20px;
left: 20px;

Ini memposisikan uraian di kiri bawah baris.

Memposisikan Ikon Menu Menggunakan Transform Translate

Setelah semua uraian diposisikan untuk status default, kita dapat mulai memposisikan item menu untuk status klik (di mana mereka akan berakhir setelah mengklik tombol menu utama). Untuk melakukan ini, kita dapat menggunakan properti transform translate di dalam Divi builder. Tidak ada status klik yang tersedia di pembuat Divi (seperti mengarahkan kursor) karena ini adalah sesuatu yang ditangani oleh JavaScript. Jadi kita akan memposisikan item menu kita di mana kita ingin mereka berada di klik sekarang. Kemudian kita akan menggunakan Javascript untuk mengaktifkan dan menonaktifkan posisi itu saat mengklik tombol menu utama.

Kami ingin mempertahankan uraian #1 karena ini adalah tombol menu utama. Namun, kami ingin memindahkan uraian #2, #3, #4 dan #5. Dan karena uraian kita sekarang ditumpuk di pembuat visual, mari gunakan mode bingkai gambar untuk memperbarui posisi untuk setiap uraian.

Posisi Blurb #2

Buka pengaturan untuk uraian #2 dan perbarui yang berikut:

Transformasi Terjemahkan sumbu Y: -10em

Inilah posisi baru dari uraian #2.

Posisi Blurb #3

Buka pengaturan untuk uraian #3 dan perbarui yang berikut:

Transformasi Terjemahkan sumbu Y: -8.6em
Transformasi Terjemahkan sumbu X: 5em

Inilah posisi baru dari uraian #3.

Posisi Blurb #4

Buka pengaturan untuk uraian #4 dan perbarui yang berikut:

Transformasi Terjemahkan sumbu Y: -5em
Transformasi Terjemahkan sumbu X: 8.6em

Inilah posisi baru blurb #4.

Posisi Blurb #5

Buka pengaturan untuk uraian #5 dan perbarui yang berikut:

Transformasi Terjemahkan sumbu Y: 0px
Transformasi Terjemahkan sumbu X: 10em

Inilah posisi baru blurb #5.

Menambahkan Kelas CSS khusus ke Blurb

Agar JavaScript kami berfungsi dengan baik, kami perlu menambahkan beberapa kelas CSS yang akan berfungsi sebagai penyeleksi untuk gaya dan fungsionalitas tambahan.

Tambahkan Kelas CSS ke Blurb #1

Dalam mode tampilan gambar rangka, buka pengaturan untuk uraian #1 dan tambahkan Kelas CSS berikut:

Kelas CSS: transform_target

Tambahkan Kelas CSS ke Blurb #2, #3, #4, dan #5

Empat uraian lainnya semuanya akan berbagi kelas CSS yang sama, jadi kita dapat menggunakan fitur multiselect untuk memilih Blurb #2, #3, #4, dan #5 dan memperbarui Kelas CSS untuk keempatnya sebagai berikut:

Kelas CSS: has-transform toggle-transform-animation

Perhatikan ada dua kelas css yang dipisahkan oleh spasi.

Menambahkan CSS Eksternal dan JavaScript dengan Modul Kode

Setelah Kelas CSS kami telah ditambahkan ke uraian, kami siap untuk menambahkan kode kami ke halaman menggunakan modul kode. Untuk melakukan ini, tambahkan modul kode di bawah uraian #5.

Kemudian paste kode berikut ke dalam modul kode:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Ini adalah CSS eksternal yang digunakan dalam kombinasi dengan kode jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

Dan ini adalah kebutuhan JavaScript untuk mendapatkan item menu ikon melingkar untuk diperpanjang saat mengklik tombol menu.

Pastikan Anda menjaga agar tag style tetap melilit CSS dan tag script melilit JavaScript/jQuery.

Periksa hasil akhir fungsionalitas di halaman langsung.

Menambahkan URL Item Menu

Karena ini adalah menu, keempat item menu akan membutuhkan tautan/URL. Untuk menambahkan URL yang diperlukan untuk setiap item menu, buka pengaturan modul uraian untuk masing-masing dari 4 item menu dan tambahkan URL tautan Modul.

Membuat Tombol Menu Lengket (atau diperbaiki)

Karena menu ini kecil dan intuitif untuk perangkat seluler, Anda mungkin ingin membuat menu tersebut melekat agar tetap berada di kiri bawah browser.

Untuk melakukan ini, pilih kelima uraian menggunakan fitur multiselect dan kemudian perbarui CSS khusus di Elemen Utama dengan mengganti nilai posisi "absolut" dengan "tetap".

position: fixed !important;
bottom: 20px;
left: 20px;

Sekarang menu akan tetap berada di kiri bawah jendela browser.

Untuk memastikan menu berada di atas konten lain pada halaman, perbarui indeks z untuk baris sebagai berikut:

Indeks Z: 11

Kemudian keluarkan padding baris:

Padding: 0px atas, 0px bawah

Desain Akhir

Berikut adalah desain akhir dari ikon lingkaran tetap dengan tata letak yang telah dibuat sebelumnya.

Dan ini dia di ponsel.

Cara Menyesuaikan Ukuran dan Spasi Menu dengan Mudah

Seperti disebutkan sebelumnya, menu dirancang menggunakan satuan panjang em untuk pemosisian item menu pada sumbu x dan y (menggunakan transform translate). Satuan panjang em relatif terhadap ukuran ukuran teks isi induk. Oleh karena itu, karena setiap modul uraian kami memiliki ukuran teks isi yang sama yaitu 20px, kami dapat menggunakan multiselect untuk mengubah teks isi untuk semua uraian sekaligus.

Ini akan menambah atau mengurangi jarak antar item menu sesuai kebutuhan.

Dan Anda dapat melakukan hal yang sama untuk ukuran font Ikon juga. Cukup gunakan multiselect untuk menyesuaikan ukuran font ikon untuk semua item menu sekaligus.

Pikiran Akhir

Siapa yang tahu menambahkan menu ikon melingkar tetap ke halaman bisa sesederhana ini dengan Divi. Ini adalah jenis menu yang sempurna untuk seluler juga! Tentu, ada beberapa cuplikan kode khusus yang diperlukan, tetapi fakta bahwa Anda dapat mendesain dan memposisikan status klik item menu menggunakan pembuat visual adalah hal yang cukup keren. Jangan lupa untuk menjelajahi berbagai warna, ukuran, dan desain hover yang dapat dengan mudah membuat menu sesuai dengan situs web Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!