Dropdown Navigasi Sederhana dengan JQuery

Contoh Gambar

Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya.

Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki salah satu dari script ini:

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head>).

Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi: 

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function () {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
</script>

Lalu letakkan kode pemodel ini di atas </style> atau ]]></b:skin>:

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

Nah, sekarang kita tinggal menempatkan kerangkanya saja di tempat yang kamu inginkan:

<img class='menu_ndhas' height='32' src='http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png' width='184' />
<ul class='menu_awak'>
    <li><a href='#'>Andai</a></li>
    <li><a href='#'>Saja</a></li>
    <li><a href='#'>Engkau</a></li>
    <li><a href='#'>Tahu</a></li>
    <li><a href='#'>Bahwa</a></li>
    <li><a href='#'>Aku</a></li>
    <li><a href='#'>Sangat</a></li>
    <li><a href='#'>Mencintaimu</a></li>
</ul>

Klik Simpan Template dan lihat hasilnya.

Pemahaman Lebih Lanjut:

Perhatikan baris kode ini:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function() {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
</script>

• Kita telah tahu bahwa kode $('ul.menu_awak').slideToggle('normal'); telah kita temui dalam pembuatan slide panel.
• Kode ... .animate({ fontSize: "14px", paddingLeft: "20px" }, 50 ); ...}); juga telah kita temui dalam pembuatan efek hover gambar artistik dengan JQuery. Hanya saja, untuk tutorial ini, properti yang dianimasikan bukan lagi opacity, melainkan font-size dan padding-leftnya.
  Yang Saya agak bingung, kode fontSize dan paddingLeft tidak lagi menggunakan dash (-) sebagai pemisah seperti halnya dalam CSS.
• Sedangkan kode $('ul.menu_awak li:even').addClass("alt"); digunakan untuk membuat efek list berwarna selang-seling secara otomatis.
• Dan ini adalah gambar yang kamu perlukan untuk praktek kita:

Atau Sobat juga bisa langsung menerapkannya di elemen laman html/javascript dengan meletakkan kode dibawah ini :

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function () {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "16px", paddingLeft: "25px" }, 500 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 500 );
        });
    });
</script>
<style type="text/css">
.menu_ndhas {
border:1px solid #998675;
}

.menu_awak {
display:none;
width:95%;
border-right:1px solid #998675;
border-bottom:1px solid #998675;
border-left:1px solid #998675;
margin:0px 0px;
padding:0px 0px;
}

.menu_awak li {
background:#493e3b;
list-style:none;
margin:0px 0px;
padding:0px 0px;
}

.menu_awak li.alt {
background:#362f2d;
}

.menu_awak li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}

.menu_awak li a:hover {
padding:15px 10px;
font-weight:bold;
}
</style>

<img class='menu_ndhas' height='32' src='http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png' width='100%' />
<ul class='menu_awak'>
    <li><a href='#'>Andai</a></li>
    <li><a href='#'>Saja</a></li>
    <li><a href='#'>Engkau</a></li>
    <li><a href='#'>Tahu</a></li>
    <li><a href='#'>Bahwa</a></li>
    <li><a href='#'>Aku</a></li>
    <li><a href='#'>Sangat</a></li>
    <li><a href='#'>Mencintaimu</a></li>
</ul>

• Andai
• Saja
• Engkau
• Tahu
• Bahwa
• Aku
• Sangat
• Mencintaimu