Navigasi Menu Responsive Dropdown ala New Johny Wuss

Baca Juga

Navigasi Menu Responsive Dropdown ala New Johny Wuss Tanpa JavaScript

Navigasi Menu Responsive Dropdown seperti yang terpasang di blog Komunikasi Praktis ini adalah menu navaigation ala New Johny Wuss karya Maskolis dan dimodif CB Blogger. Navmenu ini cukup simple, fast loading, dan terpenting... mobile friendly.

Cara membuatnya sangat mudah, yaitu tinggal memasukkan kode CSS dan HTML, tanpa JavaScript sehingga Fast Loading.

Navigasi Menu merupakan bagian dari Internal Link Building untuk memudahkan pengunjung mengeksplorasi konten blog sekaligus meningkatkan PageViews.

Cara Membuat Navigasi Menu Responsive Dropdown

1. Template > Edit HTML
2.  Copas kode CSS berikut ini di atas kode ]]</b:skin>

NAV MENU CSS CODES:

#menu{background:#464646;color:#eee;height:35px;font-size,width:100%;background:#3771b5;color:#fff;font-family:Arial;margin:0x;font-weight:700;text-transform:uppercase}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;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:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
@media only screen and (max-width:768px) {
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#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}}

3. Copas kode Navigasi Menu HTML berikut ini di bawah kode <div id='header-wrapper'> ...</div> atau <div class="header-wrapper"> ... </div> atau di atas kode <div class="main-wrapper">

KODE HTML NAVMENU RESPONSIVE:

<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
  <li><a class='trigger2' href='http://www.komunikasipraktis.com/' target='_blank'>Blog Partner</a></li>
</ul>
</nav>
<div class='clear'/>

Catatan:
-- Ganti kode pagar (#) dengan link halaman atau tautan apa pun yang akan ditampilkan di navigasi menu.
-- Ganti pula nama menunya sesuai dengan link yang dimasukkan.

4. Save Template!

Kini Navigasi Menu Responsive Dropdown sudah muncul di blog Anda. Tentu, sebelumnya Anda harus menghapus dulu kode-kode navigasi menu yang lama. (http://www.komunikasipraktis.com).*