Inspirasi UNDER88 dari webtoolkit.info |
jQuery CSS Menu Drop Down
UNDER88 - jQuery ini berdasarkan basic css menu drop down adalah ilustrasi sangat sederhana yang tidak memerlukan coding dramatis untuk mencapai sederhana 2 menu tingkat.Css menu drop down hanya didasarkan pada fungsi Cascading style sheet (CSS), tetapi pada beberapa tidak lama Sebuah browser kelas mereka kekurangan beberapa fitur.
Dalam contoh ini saya menggunakan jQuery plugin yang sangat sederhana hanya dengan mengarahkan "mouse" , dan menambahkan / menghapus beberapa kelas dari beberapa elemen.
Silahkan merekomendasikan hal ini jika Anda suka!
Contoh Penempatan pada HTML template .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Webtoolkit.info jQuery menu</title> <style type="text/css"> #navigation { font-family: georgia; font-size: 18px; padding: 0px; margin: 0px; list-style-type: none; } #navigation li { position: relative; float: left; margin: 0px 1px 0px 0px; } #navigation li a { display: block; padding: 5px 35px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-right: 5px; background: #cc0000; color: #ffffff; text-decoration: none; } #navigation li ul { position: absolute; left: 0px; top: 0px; display: none; padding: 0px; margin: 0px; list-style-type: none; } #navigation li.over { top: 1px; } #navigation li.over a { background: #009bcc; } #navigation li.over ul { padding: 5px!important; display: block; background: #009bcc; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-right: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-top-right: 5px; } #navigation li.over ul li { float: none; margin: 0px!important; top: 0px; } #navigation li.over ul li a { font-size: 14px; padding: 3px 30px; background: none; white-space: nowrap; } #navigation li.over ul li a:hover { background: #00bbf7; color: #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ //plugin name - animatemenu webtoolkitMenu: function(options) { return this.each(function() { //Assign current element to variable, in this case is UL element var obj = $(this); $("li ul", obj).each(function(i) { $(this).css('top', $(this).parent().outerHeight()); }) $("li", obj).hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); }); } }); })(jQuery); $(document).ready(function() { $('#navigation').webtoolkitMenu(); }); </script> </head> <body> <ul id="navigation"><!-- --><li><a href="">Sign up</a></li><!-- --><li><a href="">Orders</a><!-- --><ul><!-- --><li><a href="">Dashboard</a></li><!-- --><li><a href="">Order list</a></li><!-- --></ul><!-- --></li><!-- --><li><a href=""><span><span>My account</span></span></a><!-- --><ul><!-- --><li><a href="">Dashboard</a></li><!-- --><li><a href="">Profile</a></li><!-- --><li><a href="">Change password</a></li><!-- --></ul><!-- --></li><!-- --></ul> </body> </html>
Langkah Pemasangan Menu Dropdown Blogger
1. Masuk Pada Edit HTML template.cari code ]]></b:skin> dan masukan code CSS di bawah ini tepat di atas code tersebut :
#navigation {font-family: georgia;font-size: 18px;padding: 0px;margin: 0px;list-style-type: none;} #navigation li {position: relative;float: left;margin: 0px 1px 0px 0px;} #navigation li a {display: block;padding: 5px 35px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-right: 5px;background: #cc0000;color: #ffffff;text-decoration: none;} #navigation li ul {position: absolute;left: 0px;top: 0px;display: none;padding: 0px;margin: 0px;list-style-type: none;} #navigation li.over {top: 1px;} #navigation li.over a {background: #009bcc;} #navigation li.over ul {padding: 5px!important;display: block;background: #009bcc;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-right: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-top-right: 5px;} #navigation li.over ul li {float: none;margin: 0px!important;top: 0px;} #navigation li.over ul li a {font-size: 14px;padding: 3px 30px;background: none;white-space: nowrap;} #navigation li.over ul li a:hover {background: #00bbf7;color: #000000;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
2. Cari Code </head> dan simpan Script di bawah ini tepat di atas code tersebut :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ //plugin name - animatemenu webtoolkitMenu: function(options) { return this.each(function() { //Assign current element to variable, in this case is UL element var obj = $(this); $("li ul", obj).each(function(i) { $(this).css('top', $(this).parent().outerHeight()); }) $("li", obj).hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } ); }); } }); })(jQuery); $(document).ready(function() { $('#navigation').webtoolkitMenu(); }); </script>Catatan :
Jika pada template anda sudah ada jQuery seperti Script di atas yang di garis bawahi,Anda tidak perlu memasukan Script tersebut lagi.
3. Ini langkah terakhir dimana menu yang anda ingin tampilkan.
jika ingin menyimpannya di atas Postingan atau di bawah Header maka ini langkah penempatannya :
cari code <div id="header"/> atau <div id="main-wrapper"/> setiap template berbeda-beda dan andapun bisa menyimpannya pada widget HTML/javascript pada edit Layout jika sudah mengerti langkah penyimpanannya. anda tinggal masukan code HTML di bawah ini :
<ul id="navigation"><!-- --><li><a href="">Sign up</a></li><!-- --><li><a href="">Orders</a><!-- --><ul><!-- --><li><a href="">Dashboard</a></li><!-- --><li><a href="">Order list</a></li><!-- --></ul><!-- --></li><!-- --><li><a href=""><span><span>My account</span></span></a><!-- --><ul><!-- --><li><a href="">Dashboard</a></li><!-- --><li><a href="">Profile</a></li><!-- --><li><a href="">Change password</a></li><!-- --></ul><!-- --></li><!-- --></ul>
Selesai, dan simpan template anda lalu lihat hasilnya...
Jika ada kesalahan silahkan tinggalkan komentar anda untuk menemukan solusinya
sumber dalam bahasa inggis : www.webtoolkit.info
Wasallamualaikum Wr.Wb
mas izin copas ya,,
ReplyDelete