Navigasi Menu Blog Dropdown & Responsive ala Maskolis

Baca Juga

Cara membuat navigasi menu blog Dropdown dan Responsive  (Mobile Friendly).

NAVIGASI Menu merupakan elemen sangat penting sebuah blog. Ia berfungsi sebagai "panduan" sekaligus link internal yang menggambarkan keseluruhan isi blog atau menampilkan konten/halaman khusus.

Navigasi menu biasanya berisi Home, About, Sitemap, Kontak, Disclaimer, dan Halaman Label (daftar posting per label).

Berikut ini cara membuat navigasi menu blog responsive ala maskolis, seorang desainer template blog yang sudah tidak asing di kalangan blogger Indonesia bahkan kalangan blogger luar sana. Karyanya dibagikan gratis dan bisa didownload di blognya, Creating Website.

Contoh atau DEMO navigasi menu dropdown responsive ini seperti yang dipasang di blog ini. Kodenya cukup simple, murni CSS & HTML, tanpa JavaScript, sehingga Fast Loading dan tidak membenani loads time blog.

CARA MEMBUAT NAVIGASI MENU RESPONSIVE & DROPDOWN

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode <div class='main-wrapper'> atau yang semisalnya atau di bawah kode <div id='header> ... </div>

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
    <li><a href='/p/about.html'>About</a></li>
    <li><a href='/p/kontak.html'>Kontak</a></li>
    <li><a href='/p/sitemap.html'>Sitemap</a></li>
    <li><a href='/p/sitemap.html'>Galeri</a></li>
<li><a class='prett' href='#'>Dropdown Menu</a>
 <ul class='menus'>
 <li><a href='#'>Sub Menu1</a></li>
 <li><a href='#'>Sub Menu2</a></li>
 <li><a href='#'>Sub Menu3</a></li>
 <li><a href='#'>Sub Menu4</a></li>
 <li><a href='#'>Sub Menu5</a></li>
</ul></li>
      <li><a href='http://blogromeltea.blogspot.com' target='_blank'>Blogging Tips</a></li>
    </ul>
    </nav>

3. Copas kode CSS berikut ini di atas kode ]]</b:skin>

#menu{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWXl4F6-GW22MJBADU2fRcpcIdeuy3Be2OGDF98tJA916Kh1U8fQde_yFK7uMrVUKxsR84vzftAkp75BRl37DQcRgUyHtUaNBPn9ajbBTNbg8bUU5IyivutWKBkOqXbdZ-k53xfV9Qaf-r/s1600/menu-bg.png) repeat-x bottom;color:#ccc;height:45px;border-top:1px dashed #666}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;text-shadow:1px 1px 1px #000}
#menu a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ccc;}
#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQYlwKJPkbxmDyZX2Q5ee2Fz_3rtKSsUz_6dSJMDvmO3PNjc9AWsLT6Y-3J210lVXgvVe64oC_b32RTX3fApAAvVS3HCdXDuIblptiK-Web_hMvON_zm25Bwvs1URJbF9adkcLHdf8wDpK/s1600/by-body.png);position:absolute;z-index:99;display:none;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#333}
#menu li:hover ul.menus{display:block}
#menu a.prett{padding:0 27px 0 14px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ccc transparent transparent transparent;position:absolute;top:18px;right:9px}
#menu ul.menus a:hover{background:#ddd;color:#333}
@media screen and (max-width: 800px){
  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}
}

4. Save Template!

Kini Navigasi Menu Blog Dropdown & Responsive sudah ada di blog Anda. Tinggal melengkapi menunya dengan link halaman statis ataupun halaman label. Ganti tanda pagar (#) dengan link dan sesuaikan nama menunya. (http://blogromeltea.blogspot.com).*