Cara Membuat Navigasi Menu Blog Responsive, Dropdow, plus Media Sosial

Baca Juga

TAMPILAN Navigasi Top Menu Blog Responsive di atas Header, plus Dropdown Menu, dan plus ikon Media Sosial ini sebagai berikut:

Live Demo 

Gambar pertama tampilan desktop. Gambar kedua tampilan di Mobile/HP. Cara membuatnya cukup mudah, hanya dengan memasukkan dua kode CSS/HTML ke dalam template blog.

Cara Membuat Navigasi Menu Blog Responsive, Dropdow, plus Media Sosial

1. Template > Edit HTML
2. Temukan (Ctrl+F) kode </head>
3. Copy & Paste kode berikut ini di atas kode </head>

<style> /* CSS Menu Top */ #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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Catatan: kode warna merah dihapus saja, jika di template Anda sudah ada kode jQuery tersebut.

2. Copy & Paste kode berikut ini di atas kode <div id='header>

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='#'>Sub-item 1</a></li>
<li><a href='#'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='/p/get-in-touch.html'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<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>

3. Save template!

Kini Anda tinggal membuat menu atau halaman statis yang akan ditampilkan di top menu navigasi responsive di atas header blog plus dropdown dan akun media sosial ini, juga mengganti link akun media sosial dengan akun medsos Anda.*

Sumber