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 mempunyai skrip yang kurang lebih tampak menyerupai ini:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>Jika sudah ketemu, kita eksklusif masuk ke langkah dua (jika tidak ketemu, salinlah isyarat tersebut dan letakkan di atas </head>). Berikutnya salin isyarat ini, lalu letakkan di bawah isyarat tadi:
<script type="text/javascript"> $(document).ready(function () { $("ul.menu_awak li:even").addClass("alt"); $('.menu_ndhas').click(function() { $('ul.menu_awak').slideToggle(); }); $('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 isyarat CSS ini di atas isyarat ]]></b:skin> atau </style>:
.menu_ndhas { display:block; border:1px solid #998675; margin:0; padding:0; } .menu_awak { width:184px; border-right:1px solid #998675; border-bottom:1px solid #998675; border-left:1px solid #998675; margin:0; padding:0; display:none; } .menu_awak li {background-color:#493e3b} .menu_awak li.alt {background-color:#362f2d} .menu_awak li a { display:block; color:white; text-decoration:none; padding:10px; } .menu_awak li a:hover { padding:15px 10px; font-weight:bold; }Nah, kini tinggal menempatkan kerangkanya saja di daerah yang kau inginkan:
<img class="menu_ndhas" width="184" height="32" src="http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png"/> <ul class="menu_awak"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul>Klik Simpan Template dan lihat hasilnya.
Sumber https://www.dte.web.id/