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(http://1.bp.blogspot.com/-oB6hb7vlX3s/UhVaYStH6qI/AAAAAAAAAzQ/HTg9BDuy50Q/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&#038;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.

13 komentar:

  1. Ketemu juga akhirnya.. makasih gan..

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. sory ada yg kurang, tambahin langkah nomor 2

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. kagak work gan,, menunya gk bisa dropdown!!!

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. tadaaaa...
    work jg akhirnya huhh, tinggal ane rapihin. tengkyu gan tutornya, cm tutor disini yg berhasil.. blog2 tetangga pada gak mempan semua..
    ops... hehe!! sekalian ninggal jejak,,

    keep share gan
    tq

    ReplyDelete
  9. berhasil ku pasang di blog baruku mas, terimakasih

    ReplyDelete
  10. wah ada yang berhasil, coba praktek, makasih ya gan

    ReplyDelete