 |
| Menu dropdown |
Membuat menu pada sebuah situs tentu dapat mempermudah pengunjung untuk mengetahui gambaran umum sebuah situs. Ada beberapa menu yang bisa dibuat pada sebuah situs. Berikut cara membuat menu Dropdown pada sebuah blog. (Untuk mempermudah silahkan
Lihat Video )
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......
