Cara Mudah Membuat Menu Navigasi Responsive Blogger Cara Mudah Membuat Menu Navigasi Responsive Blogger - mizipediacom mizipediacom: Cara Mudah Membuat Menu Navigasi Responsive Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mudah Membuat Menu Navigasi Responsive Blogger

Sabtu, 27 Mei 2017



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.
Lihat Juga