March 10, 2015

Navigasi Menu Responsive plus Drop-Down & Media Sosial

March 10, 2015

Navigasi Menu Responsive plus Drop-Down & Media Sosial
Cara Membuat Navigasi Menu Responsive Dropdown plus Media Sosial - Fast Loading.

NAVIGASI menu berikut ini terbilang "lengkap". Selain responsif (mobile friendly), juga dilengkapi dropdown menu dan widget media sosial (Facebook, Twitter, Google Plus, Youtube, dan Linkedin).

Menu navigasi ini cocoknya dipasang di atas header atau area logo blog --menjadi Top Menu. Bisa juga dipasang di bawah header untuk menggantikan navigasi menu yang ada.

Navigasi Menu Responsive plus Drop-Down & Media Sosial yang clean, ringan, dan masih bisa dimodif warna latar belakang dan jenis hurufnya ini dishare iSmooth Blog.

Contoh & demonya bisa dilihat di iSmoothic itu. Demo menu responsive plus medsos yang dipasang di bawah header bisa dilihat di blog demo template CB Theme.

Ini penampakannya (screenshot):

Navigasi Menu Responsive plus Drop-Down & Media Sosial

Navigasi Menu Responsive plus Drop-Down & Media Sosial

Cara Membuat Navigasi Menu Responsive plus Drop-Down & Media Sosial

Sebelum memasang menu responsive simple ini, pastikan di template blog Anda sudah ada link ke kode jQuery, seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Jika belum ada, pasang link kode script jquery tersebut di atas kode </head>

CARA PASANG
Kini kita ke cara memasang Navigasi Menu Responsive plus Drop-Down & Media Sosial:

1. Klik "Template" > "Edit HTML"
2. Copas kode berikut ini di atas atau sebelum kode </head>

<style>
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;Open Sans&#39;;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;Open Sans&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
}
</style>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Kode warna merah adalah link ke Awesome Font untuk memunculkan icon media sosial. Jika link itu sudah ada di template blog Anda, gak usah disertakan, hapus saja.

3. Copas kode berikut ini di atas kode <div class='header-wrapper'> atau <div id='header-wrapper'> atau <header id="header-wrapper">

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>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 class='dutt' href='#'>Dropdown</a>
<ul class='menux'>
<li><a href='#'>Submenu 1</a></li>
<li><a href='#'>Submenu 2</a></li>
<li><a href='#'>Submenu 3</a></li>
</ul>
</li>
<li><a href='http://www.contohblog.com' target='_blank'>CB Blogger</a></li>

<!-- Menu Link Sosial Media -->
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>

4. Ganti tanda pagar (#) dengan link menu. Demikian pula nama menunya dengan navigasi menu yang dikehendaki.

5. Keadilan sosial bagi seluruh rakyat Indonesia :)

SAVE!!!

Kini Navigasi Menu Responsive plus Drop-Down & Media Sosial sudah muncul di blog Anda.

Catatan: Edit Menu

Agar link menu About, Kontak, dan Sitemap berfungsi, maka Anda tinggal membuat Halaman Baru (New Page) dengan Judul/Nama About, Kontak, dan Sitemap.

Otomatis akan muncul di menu responsive ini:

<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>

Jika ingin menambahkan menu lainnya, buat menu halaman barunya, lalu tinggal tambahkan link baru, misalnya:

<li><a href='/p/galeri.html'>Galeri</a></li>
<li><a href='/p/foto.html'>Foto</a></li>

Panduan lengkap edit menu, silakan simak:

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

18 comments on Navigasi Menu Responsive plus Drop-Down & Media Sosial

  1. dear mas CB, saya sdh pasang d blog: alqudwahsma dotblogspotdotcom, tapi saat diklik 'mengganti' halaman, pengin yg spt punya mas di atas itu... jika diklik 'membuka halaman baru'... bgmn caranya? aturnuhun.

    ReplyDelete
    Replies
    1. tambahkan kode target="_blank" setelah link

      Delete
    2. Contohnya:
      < a href="https://plus.google.com/106869251529186655236/posts" target="_blank" >

      Delete
  2. thank bos,,seharian gue otak atik blog buat widget medsos utk di atas header g bisa2,akhirnya ketemu diblog anda...trimakasih

    ReplyDelete
  3. mas bos mau tanya ne setelah aku pasang widget ini kok slidshow nya tidak berfungsi ya...mohon kasih tahu caranya agar bisa berfungsi lg....

    ReplyDelete
  4. apakah ini cocok juga untuk versi Mobile??

    ReplyDelete
  5. kok di blog saya ga ada header wrapper ya? gimana mas

    ReplyDelete
    Replies
    1. pasti ada, kalo gak ada maka gakkan ada header blog :)

      Delete
    2. sama tak ada header wrapper
      header id dan lain lain
      tapi di template blogger yg simple / sederhana namanya header-outer <<---- kalau tak salah

      Delete
  6. pagi.. dear mas CB
    mau tanya jika di sub menu ketika sedang drop down mau ada icon gambar di samping tulisan sub menunya caranya gimana ya?
    trims ya

    ReplyDelete
    Replies
    1. tidak dianjurkan, selain "lebay", juga memperlambat loading
      kasih backgroudn di menu li {background: url(...) ; padding-left: 15px

      Delete
  7. mohon bantuan mas CB.. untuk membuat header yg disarankan menjadi floating header bisa ditambahkan kode html apa dan diletakkan dimana ya?

    ReplyDelete
  8. Gan cara memhuat semua drop down menghilang gimana

    ReplyDelete
    Replies
    1. semua menu diapit kode < li > dan < / li >, jadi hapus saja kode "li" hingga "/li" itu semua

      Delete
  9. Jempolllll buat tutorialnya A...

    ReplyDelete
  10. Menemukan blog ini sangat menarik. Berharap untuk mendapatkan bacaan yang baik lagi dan lagi dari blog ini. Terima kasih lagi
    TechyNoobs

    ReplyDelete

Contact Form

Name

Email *

Message *