Cara Mudah Membuat Menu Navigasi Responsive Blogger




Cara Mudah Membuat Menu Navigasi  Responsive Blogger
Cara Mudah Membuat Menu Navigasi  Responsive Blogger
Kali ini saya akan share cara mudah membuat menu responsive. menu yang saya share ini keren dan cantik, cocok untuk anda yang ingin menggantikan menu navigasi blog anda.


Jika anda ingin membuat nya, maka biasa anda simak langkah-langkah di bawah ini khusus nya bagi yang masih newbie, mungkin bagi yang sudah paham kode html,css dan lainnya yang keseringan utak atik template mereka, pasti sudah tidak asing lagi, 

tapi bagi yang masih pemula tenag saja saya akan jelaskan agar mudah di mengerti, untuk melihat menu navigasi nya bisa anda klik tombol demo.
1. Pertama , pastikan anda sudah masuk di blogger sendiri atau disini
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Salin kode di bawah ini dan paste di atas kode </head> atau </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>
4. Kemudian Anda salin kode di bawah ini dan paste di atas kode ]]></b:skin> atau </style>
nav { display: block; background: #374147; } .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: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #F70000; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); 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: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #F70000; 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(20px,20px); 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: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #F70000; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #F70000; 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) { }
5. Dan anda cari lagi kode </header> copy kode di bawah ini dan Paste di atas kode </header>
<nav>
<a class="responsive-menu" href="http://www.mizipedia.com/" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
<li><a class="homer" href="/"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
<li><a href="http://www.mizipedia.com/">Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 2</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 3</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 4</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
<li><a href="http://www.mizipedia.com/">Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 2</a>
    <ul>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 2</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 3</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 4</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 3</a>
    <ul>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 2</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 3</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 4</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
<li><a href="http://www.mizipedia.com/">Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 2</a>
    <ul>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 2</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 3</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 4</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="http://www.mizipedia.com/">Sub-Menu 3</a>
    <ul>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 1</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 2</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 3</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 4</a></li>
<li><a href="http://www.mizipedia.com/">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="http://www.mizipedia.com/"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>
</ul>
</nav>
Note. anda gantikan URL http://www.mizipedia.com/ dengan Url milik anda.
6. Langkah terakhir anda copy code di bawah ini dan Simpan di atas kode </header>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Note. Apabila di template anda sudah terdapat link css awesome font dan link jQuery maka tidak perlu anda simpan kode ini ke template anda.
Demikian lah penjelasan saya pada hari ini, semoga bisa bermanfaat untuk anda. jika ada yang kurang jelas bisa di tanyakan langsung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect