Komunikasi Praktis
  • HOME
  • Jurnalistik
  • Media
  • Humas
  • Speaking
  • Blogging
    • Templates
    • Tips SEO
    • AdSense
    • Posting
  • Komunikasi
  • About
  • Kontak
  • Sitemap
  • Disclaimer
  • Iklan
Home Responsive Menu Navigasi Menu Responsive Dropdown ala New Johny Wuss

Navigasi Menu Responsive Dropdown ala New Johny Wuss

Romeltea Komunikasi Praktis Romeltea
April 7, 2015
Romeltea Follow @romel_tea
Romeltea

Baca Juga

Navigasi Menu Responsive Dropdown
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).*

Thanks for reading Navigasi Menu Responsive Dropdown ala New Johny Wuss | Tags: Blogging Desain Blog Menu Blog Navigasi Menu Responsive Menu

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

5 komentar on Navigasi Menu Responsive Dropdown ala New Johny Wuss

  1. UnknownAugust 07, 2015

    Kode < / input > ini ngk ada

    ReplyDelete
    Replies
    1. BATIC MediaAugust 09, 2015

      tambahkan aja :)

      Delete
      Replies
        Reply
    2. Reply
  2. UnknownJune 26, 2016

    menunya langsung kucopas, pasang dan jadi
    mantap hasilnya
    terimakasih telah berbagi

    ReplyDelete
    Replies
      Reply
  3. Teknisi Mesin LaundryApril 24, 2017

    trima kasih

    ReplyDelete
    Replies
      Reply
  4. UnknownMay 30, 2017

    izin nyontoh menu navigasinya blog ini, bagus mas ada kreasinya

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Subscribe to: Post Comments (Atom)

Recent Posts

Popular Posts

  • Contoh Naskah Pembukaan oleh Pembawa Acara (MC)
  • Cara Menjadi Pembawa Acara (MC) yang Baik
  • Karya Tulis Ilmiah: Pengertian, Karakteristik, dan Jenis-Jenis
  • Contoh Naskah MC (Pemandu Acara) untuk Acara Agustusan
  • Teknik Debat dan Cara Berdebat yang Baik
  • Daftar Kata Baku – Tidak Baku Bahasa Indonesia
  • Pengertian Literasi Secara Bahasa dan Istilah
  • Jurnalisme Kuning Jadi Trend Situs Berita
  • Contoh Script Opening Siaran Radio
  • Arti dan Asal-Usul Teks Lorem Ipsum Dolor Sit Amet

Info Bola & MotoGP

Domain & Hosting

Hosting Unlimited Indonesia

Categories

Bahasa Blogging Feature Fotografi Google Adsense Humas Internet Jurnalistik Kode Etik Komunikasi Media Media Massa Menulis Pers Podcast Presentasi Press Release Public Speaking Radio Teknik MC Teknik Presentasi Tenik MC Tips SEO Wartawan Website

About

Komunikasi Praktis adalah blog tentang keterampilan komunikasi: jurnalistik, media massa, kepenulisan, public speaking, mc, siaran radio, presentasi, humas, public relations, blogging, podcasting, dll.

Web Partners

  • Romeltea Online
  • Romeltea Media
  • Contoh Blog
  • Katalisnet
  • Median Sport

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Copyright © Komunikasi Praktis. All rights reserved