Wordpress
Nov22

Cara membuat fixed menu di themes kerenbro

Ktzagcplugin free agcplugin
Iklan

Ada beberapa customer yang nanya mengenai menu themes kerenbro, bisa gak dibuat fixed ketika menu scroll ke bawah. Ane jawab bisa om, tapi modifikasi sendiri.. Hehehe, Oke deh ane kasih tau cara membuat fixed menu di themes kerenbro.

Sangat mudah sekali, karena ane pakai bootstrap dan di JS bootstrap sudah ada dasar javascript buat fixed menu, maka berikut adalah langkah langkahnya:

1. Sebelumnya install terlebih dahulu wp editor atau WPIde.

2. Masuk ke folder js/ lalu edit custom.main.js. Tambahkan kode berikut:

// AFFIX MENU
jQuery('.mainmenu').affix({
offset: jQuery('.mainmenu').position()
});

Tepat dibawah kode:

// SUPERFIST
jQuery('ul#topmenu').superfish({
delay:       500,                            // one second delay on mouseout
animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
speed:       'fast',                          // faster animation speed
autoArrows:  false                            // disable generation of arrow mark-up
});
jQuery('ul#menu-secondmenu').superfish({
delay:       500,                            // one second delay on mouseout
animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
speed:       'fast',                          // faster animation speed
autoArrows:  false                            // disable generation of arrow mark-up
});

3. Lalu save, setelah itu masuk ke style.css, tambahkan kode berikut:

.mainmenu.affix{z-index:9999;position: fixed;top: 0px;left:0px;width: 100%;margin:auto;}

Tepat dibawah kode:

.mainmenu ul ul ul {left: 224px !important;top: -5px !important;}

Lalu save! Maka akan bisa lihat hasilnya sebagai berikut:

Klik gambar untuk melihat ukuran sebenarnya..

fixed-menu-scroll

Silahkan test menu dengan scroll ke bawah lalu keatas… :D

Tags:
Iklan

Author: 

Freelance designer, tidak terpaku sama yang namanya waktu, hobby mengunjungi localhost setelah itu baru OL. Suka pusing kalau melihat kode kode yang aneh. :| Jangan lupa add ane di link social newtwork dibawah.

author

Related Posts "Cara membuat fixed menu di themes kerenbro"

2 Responses

  1. author

    ProdukIM3 years ago

    Thankyu tutorialnya keren banget mas brou,ane mau tes biar bisa diterapkan untuk semua jenis theme, :D

    Reply
  2. author

    Kerudung Bagus3 years ago

    Bagus sekali gan terima kasih banyak sangat bermanfaat sekali gan

    Reply

Leave a reply "Cara membuat fixed menu di themes kerenbro"

Captcha: * Time limit is exhausted. Please reload CAPTCHA.