Wordpress
Dec11

Cara membuat fixed menu di themes kreview

Ktzagcplugin free agcplugin
Iklan

Cara membuat fixed menu di themes kreview, sangat mudah sekali berikut adalah step by step nya:

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:

// JS SELECT NAV FOR SMALL SCREEN
    selectnav('topmenu', {
        label: '-- SELECT MENU --',
        nested: true,
        indent: '-'
    });

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 {
    background: #0050ef; /* Old browsers */
    background: -moz-linear-gradient(top,  #0050ef 0%, #003fed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0050ef), color-stop(100%,#003fed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0050ef 0%,#003fed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0050ef 0%,#003fed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0050ef 0%,#003fed 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0050ef 0%,#003fed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0050ef', endColorstr='#003fed',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid rgba(225,225,225,0.7); 
    font-size: 14px;
    line-height: 20px;
    position: relative;
    text-shadow: 1px 1px rgba(0,0,0,0.4);
    margin:auto -10px;
}

Lalu save! Maka akan bisa lihat hasilnya sebagai berikut:

Klik gambar untuk melihat ukuran sebenarnya..

kreview-fixedmenu

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 kreview"

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

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