Menu Dropdown Vertikal Melayang di Blog Versi Jquerry


Puji syukur kepada Allah karena telah memberikan saya petunjuk untuk mengutak-atik kode ini tanpa rekayasa. hahaha. Sebelumnya saya sempat jengkel ketika mendatangi setiap blog yang berisi tutorial blogging, saya tidak bisa menemukan kode yang membuat menu vertikal versi Jquerry ini melayang di pojok blog. Memang sih waktu saya lihat di blog-blognya teman-teman pada bagus karena ada nilainya jika menambahkan floating menu di blognya masing-masing. Maka dari itu saya nekad melakukan percobaan pada template blog saya sendiri. Dari 1000 kesalahan (lebay), akhirnya saya menemukan jawabannya. Ini adalah hasil dari percobaan saya. Lihat gambar di bawah ini:

  


Gambar di atas tampak terlihat sebuah menu navigasi kecil, tapi jika anda klik menu tersebut, maka gambarnya akan menjadi seperti di bawah ini: 


Nah, bagaimana? Menarik bukan? Ketika anda mengklik menu tersebut, maka menu itu akan memanjang ke atas. 
Jika anda mau menempatkan menu ini di sembarang tempat, nanti akan saya jelaskan belakangan.
Jika anda masih ragu, lihat di sini DEMO nya.
Gambar menu di atas saya ambil dari tutorial blog-blog yang ada, jika anda ingin menggantinya, bisa kok. tergantung anda, males atau enggak. Hehehe. Jika anda tertarik dengan menu ini, langsung saja ke TKP:

Masuk ke akun blog anda
Masuk ke Rancangan
Tambahkan Gadget HTML/Javascript, lalu masukkan kode di bawah ini ke dalam Gadget anda:

    <img src="https://lh4.googleusercontent.com/-ZaIhj_GNxBg/TXHqtYwl1WI/AAAAAAAAATY/Aq5m2EBr0gE/s1600/navigate.png" width="184" height="32" class="menu_head" />
    <ul class="menu_body">
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    <li><a href="#">gotriogo</a></li>
    </ul>

Kode berwarna BIRU gantilah dengan alamat URL yang anda tuju. Kode Berwarna  MERAH gantilah dengan nama menu anda. Jika anda ingin menambah baris menu lagi, anda cukup menambahkan kode  <li><a href="#">gotriogo</a></li> di atas </ul>
Setelah itu SAVE, lalu lihat hasilnya.
Jika sudah anda lihat, pasti hasilnya menjengkelkan. Hehehe. Maaf, saya cuma mau menunjukkan saja bahwa gadget itu perlu kode lagi.
Langsung masuk ke EDIT HTML
Gunakan Ctrl-F untuk mencari kode </head>
Jika sudah ketemu, masukkan kode-kode berikut di atas </head>:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("ul.menu_body li:even").addClass("alt");
        $('img.menu_head').click(function () {
        $('ul.menu_body').slideToggle('medium');
        });
        $('ul.menu_body li a').mouseover(function () {
        $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_body li a').mouseout(function () {
        $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
    </script>

Setelah itu Gunakan Ctrl-F lagi untuk mencari kode ]]></b:skin> dan masukkan kode di bawah ini di atas ]]></b:skin>:

    /* ---------------
    Animated Drop Down Menu with jQuery
    ---------------------------------- */
     ul, li .menu_head{
         margin:0; padding:0;
         list-style:none;
         }

    .menu_head{
        border:1px solid #998675;
        }

    .menu_body {
        display:none;
        width:184px;border-right:1px solid #998675;
        border-bottom:1px solid #998675;
        border-left:1px solid #998675;
        }
    .menu_body li{
        background:#493e3b;
        }
    .menu_body li.alt{
        background:#362f2d;
        }
    .menu_body li a{
        color:#FFFFFF;
        text-decoration:none; padding:10px;
        display:block;
        }
    .menu_body li a:hover{
        padding:15px 10px; font-weight:bold;
        }

Nah, setelah itu SAVE template, lalu lihat hasilnya.
Hahahahaa. Bagaimana? Ternyata menunya tidak melayang bukan?? Maaf ya? Kalau saya tidak memberitahukan cara seperti ini, maka anda tidak akan tahu fungsi-fungsi kode yang saya bagikan. Jika sudah anda lihat, berarti menu itu belum sempurna sesuai DEMO yang saya contohkan.
Mengetahui hal itu, langsung saja saya berikan kode untuk membuatnya melayang.

Masuk ke TKP lagi dan pasang kode DI BAWAH kode di atas atau DI ATAS kode ]]></b:skin> :
#pojok {
    position:fixed;_position:absolute;top:100px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Perhatikan kode berwarna merah di atas. Arti dari top:100px adalah letak penempatan menu di atas. top adalah penempatan pertama (di atas), jika anda ingin menggantinya di bawah seperti gambar yang saya perlihatkan tadi, anda tinggal menggantinya dengan kode bottom, maka hasilnya adalah bottom:100px. Arti dari 100px adalah jarak yang anda buat, misalnya top:100px. Semakin besar angka yang ditentukan, maka menu yang letaknya ada di atas akan semakin ke bawah. Sebaliknya jika menggunakan bottom:100px, maka menu akan menggeser ke atas sedikit. Jika anda tidak percaya, cobalah sendiri. Hehehe.
Untuk kode kedua, left:0px juga hampir sama seperti top:100px atau bottom:100px ,cuman yang membedakan adalah penempatan SISI, mau ke kiri (left:0px), atau ke kanan (right:0px)?

Nah, setelah anda sudah memahami kode di atas, langsung SAVE template, dan lihat hasilnya. Semoga memuaskan.

GOODLUCK.

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

1 comment

July 31, 2012 at 5:48 PM

mantab

www.nomerpilihan.com

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.