Bantuan » Bantuan » Tema » [ASK] Merubah tampilan Menu Navigasi

Melihat 12 balasan - 1 sampai 12 (dari total 12)
  • coba pakai jQuery gan
    http://www.aacc2015.id/ itu tidak pakai wordpress gan,,
    kalau yg http://www.asuransipru.com/ itu pakai theme vantage, saya pernah menggunakan itu pada client saya coba lihat ne gan : http://www.edu2smart.info

    Pencetus Utas luthfi.elfathy

    (@luthfielfathy)

    bukan masalah themenya gan.. Tapi cara customize tampilan menu navigasinya,, biyar ada border / shape atau apa itu namanya yang kotak panjang di menu… atau kalau di klik yang berubah bukan warna teksnya aja, tapi warna background menu kayak aacc2015.com kl kursor mendekat kan yang berubah warna blok backroundnya juga.. 🙂

    kl web toraindonesia.com kan tampilan menunya biasa aja tuh,,, kl di klik cuma teks nya aja yang berubah warna.. nah saya pengen kayak web asuransipru.com / aacc2015.com tampilan menunya, ada balok / bordernya… gitu gan 🙂

    owh,, itu setting CSSnya gan,, biasanya di ul li a:hovernya, customnya dibikin display:block, dan setting background-colornya,,, nanti saya coba buatkan stylenya….

    Pencetus Utas luthfi.elfathy

    (@luthfielfathy)

    Ok d tggu ya gan..

    ini kode css template di a:hovernya., kira2 di edit seperti apa.

    }
    .main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover {
    	background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    	color: #0FBE7C;
    }
    .main-navigation ul li ul li ul {
    	left: 150px;
    	top: -1px;
    }
    .main-navigation select {
    	display: none;
    }

    Tks sebelumnya.. 🙂

    Ini Gan Coba Dulu :
    Masuk ke dasbor > appearance > editor dan pastekan css ini di atas cari tulisan

    /* =NAVIGATION
    ———————————-*/

    dan Block ke bawah sampai di atas tulisan :

    /* =SMALL MENU
    ———————————–*/

    dan Pastekan Kode CSS dibawah ini :

    /* =NAVIGATION
    ———————————————– */
    nav li > ul,
    nav li > ol {
    margin: 0;
    list-style: none;
    }
    .main-navigation {
    float: right;
    padding-top: 5px;
    max-height: 100%;
    }
    .main-navigation li {
    float: left;
    position: relative;
    margin: 0 0.1em;
    padding: 0;
    font-family: ‘Lato’, sans-serif;
    }
    .main-navigation ul li a {
    font-size: 16px;
    }
    .main-navigation li.default-menu,
    li.default-menu {
    display: none;
    }
    .main-navigation a {
    color: #444444;
    display: block;
    float: left;
    padding: 0 1em;
    line-height: 80px;
    margin: 0;
    height: 80px;
    border-top: 4px solid transparent;
    }
    .main-navigation a:hover,
    .main-navigation ul li.current-menu-item a,
    .main-navigation ul li.current_page_ancestor a,
    .main-navigation ul li.current-menu-ancestor a,
    .main-navigation ul li.current_page_item a,
    .main-navigation ul li:hover > a {
    color: #59BA52;
    background-color: #055A0B;
    }

    /* =DROP DOWN
    ———————————————– */
    .main-navigation ul li ul,
    .main-navigation ul li:hover ul ul,
    .main-navigation ul ul li:hover ul ul,
    .main-navigation ul ul ul li:hover ul ul,
    .main-navigation ul ul ul ul li:hover ul ul {
    display:none;
    z-index: 9999;
    }
    .main-navigation ul li:hover ul,
    .main-navigation ul ul li:hover ul,
    .main-navigation ul ul ul li:hover ul,
    .main-navigation ul ul ul ul li:hover ul,
    .main-navigation ul ul ul ul ul li:hover ul {
    display:block;
    }
    .main-navigation ul li ul {
    position: absolute;
    background: #408206;
    border-top: 1px solid #0FBE7C;
    top: 100%;
    left: 0;
    width: 150px;
    }
    .main-navigation ul li ul li {
    float: none;
    border-bottom: 1px solid #EAEAEA;
    padding: 0;
    }
    .main-navigation ul li ul li a,
    .main-navigation ul li.current-menu-item ul li a,
    .main-navigation ul li ul li.current-menu-item a,
    .main-navigation ul li.current_page_ancestor ul li a,
    .main-navigation ul li.current-menu-ancestor ul li a,
    .main-navigation ul li.current_page_item ul li a {
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    color: #fff;
    }
    .main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    color: #0FBE7C;
    }
    .main-navigation ul li ul li ul {
    left: 100%;
    top: 0;
    }
    .main-navigation select {
    display: none;
    }

    selamat mencoba

    coba dulu,, tapi kode yg di block diusahakan di copy dulu,, jika tidak cocok tinggal mengembalikan lagi…

    Pencetus Utas luthfi.elfathy

    (@luthfielfathy)

    Wahh mantab…. Tkyu gan… boleh minta emailnya kl ada pertanyaan tntag WP bisa minta tolong… hehehe

    Pencetus Utas luthfi.elfathy

    (@luthfielfathy)

    oya satu lagi gan… itu menu dropdown nya kalau di klik warna nya putih.. kl mau diganti gmana ya.. saya cari kode CSSnya kq ga nemu

    .main-navigation ul li ul li a,
    .main-navigation ul li.current-menu-item ul li a,
    .main-navigation ul li ul li.current-menu-item a,
    .main-navigation ul li.current_page_ancestor ul li a,
    .main-navigation ul li.current-menu-ancestor ul li a,
    .main-navigation ul li.current_page_item ul li a {
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    color: #fff;
    }

    Kode yang ‘color:#fff;’ dihapus atau ‘#fff’ diganti dengan warna lain…

    .main-navigation ul li ul li a,
    .main-navigation ul li.current-menu-item ul li a,
    .main-navigation ul li ul li.current-menu-item a,
    .main-navigation ul li.current_page_ancestor ul li a,
    .main-navigation ul li.current-menu-ancestor ul li a,
    .main-navigation ul li.current_page_item ul li a {
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    }

    dan juga cari kode yg seperti ini

    .main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover {
    	background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    	color: #0FBE7C;
    }

    kode colornya hijau bukan putih

    Pencetus Utas luthfi.elfathy

    (@luthfielfathy)

    KODE color: #fff; Sudah di ilangin / diganti warna tetep ga bisa gan.. 🙁 jadi kl kursor di deketin ke dropdown menu warnanya jadi putih, sama warna teksnya.. mungkin bisa dilihat dulu web nya.. dtggu pencerahanya 😀

Melihat 12 balasan - 1 sampai 12 (dari total 12)
  • Topik ‘[ASK] Merubah tampilan Menu Navigasi’ tertutup untuk balasan baru.