Followers

Powered by Blogger.

  • Cara Membuat Menu Horizontal Tanpa JQuery

    Posted by : Unknown Aug 10, 2012

    What's up gan?
    Are you fine today?
    If you fine, I want to tell you about "Cara Membuat Menu Horizontal Tanpa JQuery"

    Di Post/Artikel saya yang sebelumnya, saya telah mengshare tentang Cara Membuat Menu Drop-Down/Horizontal, tetapi artikel saya yang itu membuat menu horizontal dengan menggunakan JQuery, maka saya akan mengshare yang tanpa JQuery, karena saya rasa lebih aman kalau kita tidak menggunakan versi yang menggunakan JQuery, karena jika terjadi kesalahan bisa terjadi GALAT. Maka itu, supaya lebih aman, saya akan memberitahukan langkah-langkahnya.

    LAHKAH - LANGKAH :

    1. Loggin di blogger.com
    2. Dari Dasbor, pilih Template


    3. Pilih Edit HTML, pilih Lanjutkan,Centang





    4. Cari kode berikut ini :

    <div class='main-outer'> atau
    <div id='main-wrapper'> atau
    <div id='main'>

    *!! Untuk mempermudah mencari tekan F3 atau tekan CTRL + F !!*

    5. Kemudian copy script/codenya dan letakkan diatas kode yang diatas.

    DESAIN 1 / MODEL 1 :

    Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
    ::DEMO::

    <style>
    /* -- Menu Horizontal + Sub Menu-- */
    #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
    #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
    #cat-nav a:hover { color:#fff; }
    #cat-nav li:hover { background:#000; }
    #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
    #cat-nav .nav-description { display:block; }
    #cat-nav a:hover span { color:#fff; }
    #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
    #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
    #secnav li { float:left; width: auto; height:35px;}
    #secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
    #secnav li ul li  { height:30px; border-top:1px solid #fff; }
    #secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
    #secnav li ul ul  { margin: -30px 0 0 180px; }
    #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
    #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
    #secnav li:hover,#secnav li.hover  { position:static; }
    #cat-nav #secnav {width:100%;margin:0 auto;}
    </style>
    <div id='cat-nav'>
    <ul class='fl' id='secnav'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Menu 1</a></li>
    <li><a href='#'>Menu + Sub Menu</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Sub Menu 1</a></li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu</a></li>
    <li><a href='#'>Menu + Sub</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Sub 1</a></li>
    <li><a href='#'>Sub 2</a></li>
    <li><a href='#'>Sub 3</a></li>
    <li><a href='#'>Sub 4</a></li>
    <li><a href='#'>Sub 5</a></li>
    <li><a href='#'>Sub 6</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Sub Menu Sub 6 </a></li>
    <li><a href='#'>Sub Menu Sub 6</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>Menu</a></li>
    </ul>
    </div>


    - Ganti tulisan #156994 untuk merubah warna background dengan warna yang gan suka
    - Ganti tanda pagar (#) dengan link tujuan menu tersebut, bisa link posting, bisa juga link kategori
    - Ganti tulisan Menu, Sub Menu, Sub 1-6, Anak Sub Menu dengan kata-kata yang gan suka
    -  <ul id='sub-custom-nav'> berfungsi untuk menambahkan Sub Menu/Anak menu. Dan jika gan mau menambahkan sub menu/anak menu, gan harus menghapus code "</li>" yang ada di menu yang mau dibuat anak menunya, dan gan copy code <li><a href='#'>Judul Menu</a></li> dan dibawahnya diakhiri dengan code
    </ul>
    </li>
    Dan setiap kali gan menambahkan anak menu lagi harus di akhiri kode tersebut, yaitu kode </ul> dan </li>.
    - Gan juga bisa mengganti-ganti warna-warna backgound anak-anak menunya, silahkan aja dicoba untuk mengganti-ganti kode warna yang ada di bagian <style> nya.

    DESAIN 2 / MODEL 2 :

    Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
    ::DEMO::

     <style>
    /* -- Menu Horizontal + Sub Menu-- */
    #cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}
    #cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:2px dotted #000;}
    #cat-nav a:hover { color:#fff; background:#000;}
    #cat-nav li:hover { background:#000; }
    #cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none; background:#FF0000; }
    #cat-nav .nav-description { display:block; }
    #cat-nav a:hover span { color:#fff; background:#FF0000;}
    #secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#FF0000; }
    #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
    #secnav li { float:left; width: auto; height:35px;}
    #secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
    #secnav li ul li  { height:30px; border-top:1px solid #fff; border-left:2px solid #000;}
    #secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
    #secnav li ul ul  { margin: -30px 0 0 180px; }
    #secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
    #secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
    #secnav li:hover,#secnav li.hover  { position:static; }
    #cat-nav #secnav {width:100%;margin:0 auto;}
    </style>
    <div id='cat-nav'>
    <ul class='fl' id='secnav'>
    <li><a href='    #'>Home</a></li>
    <li><a href='#'>Menu 1</a></li>
    <li><a href='#'>Menu + Sub Menu</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Sub Menu 1</a></li>
    <li><a href='#'>Sub Menu 2</a></li>
    <li><a href='#'>Sub Menu 3</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Anak Sub Menu 3</a></li>
    <li><a href='#'>Anak Sub Menu 3</a></li>
    <li><a href='#'>Anak Sub Menu 3</a></li>
    <li><a href='#'>Anak Sub Menu 3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>Menu</a></li>
    <li><a href='#'>Menu + Sub</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Sub 1</a></li>
    <li><a href='#'>Sub 2</a></li>
    <li><a href='#'>Sub 3</a></li>
    <li><a href='#'>Sub 4</a></li>
    <li><a href='#'>Sub 5</a></li>
    <li><a href='#'>Sub 6</a>
    <ul id='sub-custom-nav'>
    <li><a href='#'>Anak Sub 6 </a></li>
    <li><a href='#'>Anak Sub 6</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='#'>Menu</a></li>
    </ul>
    </div>


    Keterangan sama dengan desain 1/model 1.
    Untuk mengganti background, silahkan ganti code #FF0000 yang ada di code "cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}"

    6. Jika sudah merasa sempurna, silahkan pratinjau terlebih dahulu
    7. Kalau sudah sempurna, silahkan simpan template anda.
    8. Anda sudah bisa melihat hasilnya.

    ..JIKA ADA YANG KURANG JELAS SILAHKAN TULIS DI KOTAK KOMENTAR, SAYA AKAN SIAP SEDIA UNTUK MEMBANTU..



    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D

    Tag :

    0 comments

    Peraturan yang harus diikuti ketika membuat komentar :
    1. Tidak Membuat Link Aktif
    2. Tidak SPAM
    3. Menggunakan Bahasa Yang Sopan
    4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

    Selamat Berkomentar..
    Terima Kasih Atas Kerjasamanya.. ^_^

    Show Konversi KodeHide Konversi Kode Show Emoticon

    • Subscribe to: Post Comments (Atom)

    Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Johanes Djogan