membuat menu dropdown vertikal-melayang di blog

menu dropdown vertikal-melayang di blog

  

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8K49GM79VngGuVLcm9evF_vdcPPJ_NHTr_zuafW3HJiVGkiHN9lGNUUI576sk4Hk-dOoXLxs68ui0vMQjxZ5W-V4qVqwDuza9LNOFX1t5P1nq3LGkbBJn__3BB5ZVBTb2CFixoqAk7k/s1600/navigate.png" width="184" height="32" class="menu_head" />
    <ul class="menu_body">
    <li><a href="#">sukaweb</a></li>
    <li><a href="#">sukaweb</a></li>
    <li><a href="#">sukaweb</a></li>
    <li><a href="#">sukaweb</a></li>
    <li><a href="#">sukawebo</a></li>
    <li><a href="#">sukaweb</a></li>
    <li><a href="#">sukawebo</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.

sumber   http://gotriogo.blogspot.com/2011/07/menu-dropdown-vertikal-melayang-di-blog.html