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

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:

• Cara Membuat Menu About, Sitemap, Kontak
• Cara Menampilkan Halaman Statis dan Label/Kategori di Menu Navigasi
• Cara Membuat Navigasi Menu Responsive di Blogger

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

Tweet

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Subscribe to receive free email updates: