 |
| Menu dropdown |
Cara membuat menu Dropdown diatas header atau di bawah header
1. Masuk ke akun blogger anda
2. Klik menu Template
3. Kemudian klik Edit Html
4. Tekan Ctrl+F pada keyboard anda
5. Cari kode </body>
6. Copy kode dibawah ini tepat di atas kode</body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var touch = $('#resp-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
//]]>
</script>
7. Letakkan scripts css berikut tepat di atas kode ]]></b:skin> atau</style>
nav {display: block; margin-top: 0px;background: #000000;}
.menu {display: block;}
.menu li {display: inline-block; position: relative; z-index: 100;}
.menu li:first-child {margin-left: 0;}
.menu li a {font-weight: 600; text-decoration: none; padding: 10px 8px;
display: block; color: #fff; transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {color: #fff;background: #1177cc;}
.menu ul {visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px;
position: absolute; left: 0px; background: #ff0000; z-index: 99;
transform: translate(0,10px); transition: all 0.2s ease-out;}
.menu ul:after {bottom: 100%;left: 20%; border: solid transparent; content: " ";
height: 0; width: 0; position: absolute; pointer-events: none;
border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff;
border-width: 6px; margin-left: -6px;}
.menu ul li {display: block; float: none; background: none; margin: 0;padding: 0;}
.menu ul li a {font-size: 12px; font-weight: normal; display: block;
color: #f5f5f5; background: #ff0000;}
.menu ul li a:hover,.menu ul li:hover>a {background: #1177cc; color: #fff;}
.menu li:hover>ul {visibility: visible; opacity: 1; transform: translate(0,0);}
.menu ul ul {left: 149px; top: 0px;visibility: hidden;opacity: 0;
transform: translate(10px,10px); transition: all 0.2s ease-out;}
.menu ul ul:after {left: -6px; top: 10%; border: solid transparent;
content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
border-color: rgba(255, 255, 255, 0); border-right-color: #fff;
border-width: 6px;margin-top: -6px;}
.menu li>ul ul:hover {visibility: visible; opacity: 1; transform: translate(0,0);}
.responsive-menu {display: none; width: 100%; padding: 10px 8px;
background: #000000; color: #fff; text-transform: uppercase; font-weight: 600;}
.responsive-menu:hover {background: #000000; color: #fff; text-decoration: none;}
a.homer {background: #1177cc;}
@media (min-width: 768px) and (max-width: 979px) {
.mainWrap {width: 768px;}
.menu ul {top: 37px;}
.menu li a {font-size: 12px;}
a.homer {background: #000000;}}
@media (max-width: 767px) {
.mainWrap {width: auto; padding: 50px 10px;}
.menu {display: none;}
.responsive-menu {display: block; margin-top: 0px;}
nav {margin: 0;background: none;}
.menu li {display: block; margin: 0;}
.menu li a {background: #ff0000; color: #f5f5f5;}
.menu li a:hover,.menu li:hover>a {background: #1177cc; color: #fff;}
.menu ul {visibility: hidden;opacity: 0; top: 0; left: 0;width: 100%; transform: initial;}
.menu li:hover>ul {visibility: visible;opacity: 1;position: relative; transform: initial;}
.menu ul ul {left: 0; transform: initial;}
.menu li>ul ul:hover {transform: initial;}}
@media (max-width: 480px) {}
@media (max-width: 320px) {}
8. Selanjutnya letakan kode html di bawah ini tepat di bawah kode</header>
<nav>
<a id="resp-menu" class="responsive-menu" href="http://zunti.blogspot.co.id/"><i class="fa fa-reorder"></i> Menu</a>
<ul class="menu">
<li><a class="homer" href="http://zunti.blogspot.co.id/"><i class="fa fa-home"></i> HOME</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/">Home</a></li>
<li><a href="http://aceh-live.blogspot.co.id/">Aceh Live</a></li>
<li><a href="http://acehfishingclub.blogspot.co.id/">AFC</a></li>
</ul>
</li>
<li><a href="http://zunti.blogspot.co.id/search/label/Microsoft">Microsoft</a></li>
<li><a href="http://zunti.blogspot.co.id/"><i class="fa fa-yahoo"></i> Yahoo</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/search/label/Mail">Email</a></li>
</ul>
</li>
<li><a href="http://zunti.blogspot.co.id/"><i class="fa fa-Google"></i> Google</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/search/label/Gmail">Email</a></li>
</ul>
</li>
<li><a href="http://zunti.blogspot.co.id/search/label/Facebook"><i class="fa fa-Facebook"></i> Facebook</a></li>
<li><a href="http://zunti.blogspot.co.id/search/label/youtube"><i class="fa fa-Youtube"></i> Youtube</a></li>
<li><a href="http://zunti.blogspot.co.id/"><i class="fa fa-Buat Website"></i> Buat Website</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/search/label/Blogger">Blogger</a></li>
<li><a href="http://zunti.blogspot.co.id/">Wordpress</a>
<ul>
<li><a href="http://zunti.blogspot.co.id/search/label/Wordpress.com">Wordpress.com</a></li>
<li><a href="http://zunti.blogspot.co.id/search/label/Wordpress.org">Wordpress.org</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://zunti.blogspot.co.id/"><i class="fa fa-Komputer"></i> Komputer</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/search/label/Windows">Windows</a></li>
<li><a href="http://zunti.blogspot.co.id/search/label/Virus">Virus</a></li>
<li><a href="http://zunti.blogspot.co.id/search/label/internet">Internet</a></li>
<li><a href="http://zunti.blogspot.co.id/search/label/software">Software</a></li>
</ul>
</li>
</ul>
</nav>
Menu ini ada di bawah header. Bisa dipasang diatasnya atau bisa juga dipasang diatas dan dibawah header.
9. Selanjutnya letakan kode html di bawah ini tepat di bawah kode</header>
</header> rubah menjadi <header>
disini saya sudah bisa melihat yang dibawah header
<nav>
<a id="resp-menu" class="responsive-menu" href="http://zunti.blogspot.co.id/"><i class="fa fa-reorder"></i> Menu</a>
<ul class="menu">
<li><a class="homer" href="http://zunti.blogspot.co.id/"><i class="fa fa-Mywebsite"></i> Mywebsite</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/">Home</a></li>
<li><a href="http://aceh-live.blogspot.co.id/">Aceh Live</a></li>
<li><a href="http://acehfishingclub.blogspot.co.id/">AFC</a></li>
</ul>
</li>
<li><a href="http://zunti.blogspot.com/p/blog-page_61.html">Sitemap</a></li>
<li><a href="http://zunti.blogspot.co.id/p/privacy-policy-for-zunti-if-you-require.html">Privacy Policy</a></li>
<li><a href="http://zunti.blogspot.co.id/p/disclaimer-for-zunti-if-you-require-any.html">disclaimer</a></li>
<li><a href="http://zunti.blogspot.co.id/"><i class="fa fa-Contact Us"></i> Contact Us</a>
<ul class="sub-menu">
<li><a href="http://zunti.blogspot.co.id/">Email</a></li>
<li><a href="http://zunti.blogspot.co.id/">Call</a></li>
<li><a href="http://zunti.blogspot.co.id/">SMS</a></li>
</ul>
</li>
</ul>
</nav>
Semoga bermanfaat. Bye..
File bisa anda lihat di http://zunti.blogspot.co.id/
BYE......
No comments:
Post a Comment