Iyan Blog - Kali ini saya akan membuat tutorial Membuat Menu Navigasi Simple dan Responsive. Kedengarannya sudah biasa dan sudah banyak yang membagikan tutorial ini, namun tutorial kali ini merupakan request dari salah satu sobat blogger.
Menu navigasi kali ini saya ambil dari Elok Blogger Template yang tentunya responsive dan mobile friendly. oke langsung saja, jika anda ingin menerapkannya diblog anda silakan ikuti tutorial berikut ini.
Membuat Menu Navigasi Simple dan Responsive
Langkah Pertama
silakan copy CSS dibawah ini lalu letakkan di atas </style> atau ]]></b:skin>
/* Navigasi Menu */
#pull{display:none;text-decoration:none}
#navi{background:#222;width:100%;display:block;font-size:16px; font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-weight:bolder; width:100%; overflow:hidden; position:relative;text-decoration:none;margin:0 auto; padding:0}
#navi ul{margin:0 auto; padding:0}
#navi li{list-style:none}
#navi li a{float:left;display:block; color:#fff;font-size:16px; padding:10px 20px;text-decoration:none}
#navi li a:hover{display:block;text-decoration:none; color:#fff;background:#ea6153;}
@media screen and (max-width:960px){
#navi{height:auto; border-bottom:0}
#navi ul{width:100%; display:none; height:auto}
#navi li{width:100%; float:left; position:relative;}
#navi li a{padding:10px 0}
#navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px}
#navi a#pull{display:block; margin:0 auto; background-color:#333; height:40px; width:100%; position:relative}
#navi a#pull:after{content:''; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCTi06AWZm3-Nxnf0HdyDo4YgOLshnKprAXFY4N8GuepYVqylf3fXroVlB7ta4PndCMTVoLgq5jgk-bRfMt1MNd_l_CA5X6tkxbAOSNJjDr3Q5W-loERPRBHrXztE8mmGvcUtPgMZ9CWP0/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px}
}Langkah Kedua
Tambahkan jquery diatas </head>, abaikan jika sudah terdapat didalam blog anda
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>Langkah Ketiga
Copy script dibawah ini lalu letakkan diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=PT+Serif%3A400%2C700%7COpen+Sans+Condensed%3A300%2C700&ver=2.1.2");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
$(function(){var pull=$('#pull');menu=$('#navi ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()})});
//]]>
</script>Langkah Terakhir
letakkan kode HTML dibawah ini dibawah kode </header>
<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a>
<ul class='clearfix'>
<li><a href='/' title='Beranda'>Beranda</a>
</li>
<li><a href='/search/label/Tutorial%20Blogger?max-results=5' title='Tutorial Blogger'>Tutorial Blogger</a>
</li>
<li><a href='/search/label/Belajar%20SEO?max-results=5' title='Belajar SEO'>Belajar SEO</a>
</li>
<li><a href='/search/label/Template%20Blogger?max-results=5' title='Template Blogger'>Template Blogger</a></li>
<li><a href='/search/label/Internet?max-results=5' title='Internet'>Internet</a></li>
<li><a href='/search/label/Belajar%20Blog?max-results=5' title='Belajar Blog'>Belajar Blog</a></li>
<li><a href='/search/label/Sosial%20Media?max-results=5' title='Sosial Media'>Sosial Media</a></li>
</ul>
</nav>SIMPAN TEMPLATE
Sekian tutorial kali ini, jika ada hal yang ingin ditanyakan silakan lewat kotak komentar. Semoga bermanfaat dan terima kasih.