Cara Membuat Menu Navigasi dan Sosial Media Melayang Responsive di Atas Header Blog

Cara Membuat Menu Navigasi dan Sosial Media Melayang Responsive di Atas Header Blog ~ Halo sobat Blogger kembali lagi ya dengan saya Aldi Andreansyah selaku Admin bahkan sekaligus Penulis di Blog ini Alhamdulilah di kesempatan kali ini saya kembali lagi membagikan Artikel yang bertentangan dengan Blogger yang berjudul Cara Membuat Menu Navigasi Responsive dan Sosial Media Melayang di Atas Header Blog.

Contoh Gambar Versi PC :

Contoh Gambar Versi Handphone :

Siapa sih yang tidak tertarik dengan Menu Navigasi ? Yang biasa nya memudahkan para pengunjung untuk mempermudah mengetahui isi Artikel keseluruhan dan mengetahui dengan beberapa Label yang kita miliki tersebut.

Sesuai dengan judul yaitu Menu Navigasi dan Sosial Media Melayang Responsive di Atas Header (kepala), Menu Navigasi dan Sosial Media ini pun sangat cocok di gunakan di bagian paling atas header karena untuk mempermudah para pembaca tentang mengenai Profil kita dengan tampilan awal tepat di bagian atas(kepala) tersebut.

Oke langsung saja kita ke tujuan Cara Membuat Menu Navigasi dan Sosial Media Melayang Responsive di Atas Header Blog.

Langkah Pertama :
isi Script CSS di bawah ini tepat di bawah </head> atau b:skin :

<style>
/* CSS Menu TOP  edited by aldiandreansyah.blogspot.com*/

#menutop{width:100%;max-width:1000px;margin:0 auto;height:45px;background:#374760;border:1px solid #fff;}

#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:#fff;}

#menutop ul li:hover a{color:#3cc091;}

#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:#fff}

#menutop ul li ul li a{color:#fff;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:#fff;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:#374760;color:#fff;}

#menutop ul li ul li a:hover{background:#374760;color:#fff;}

#menutop li.facebook {padding:0 5px;}

#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#374760;text-align:center;color:#fff;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:#fff;}

#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:#fff;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:#374760;color:#fff;}

#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:#3cc091;}



@media screen and (max-width:960px) {

#menutop li:hover &gt; ul.menux{display:block;}

#menutop ul{border:none;border-bottom:4px solid #fff;}

#menutop{position:relative;border:none;border-bottom:4px solid #fff;}

#menutop ul{background:#374760;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:#fff}

#menutop li a:hover{background:#374760;color:#fff}

#menutop li:hover{background:#8493a0;color:#fff;}

#menutop a.dutt{font-weight: bold;}

#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#016fba;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:#fff;

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:#fff;}

#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux a{background:#016fba;color:#016fba;}

#menutop ul.menux a:hover{background:#8493a0;color:#fff;}

#menutop ul.menux li{background:#000;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:#fff;}

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

Langkah kedua :
Copy Paste kode HTML Menutop Bar Responsive ini di bawah kode <body> ,<head> atau atas kode header blog <div class='header'> atau <div id='header'> :

<nav id='menutop'>

<input type='checkbox'/>

<label/>

<ul>

<!-- secondary navigation menu start -->

<li><a class='active' href='/'><i class='fa fa-home'/> Beranda</a></li>



<li class='home2'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/about-us.html'> About US</a></li>

<li class='home3'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/hubungi-kami.html'> Contact US</a></li>

<li class='home4'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/sitemap.html'> Sitemap</a></li>

<li class='home3'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/privacy-policy.html'> Privacy</a></li>

<li class='home4'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/disclaimer.html'> Disclaimer</a></li>

<li class='home5'><a class='fa fa-' href='http://aldiandreansyah.blogspot.co.id/p/terms-of-service.html'> TOS</a></li>



<!-- primary navigation menu end -->



<!-- social media button start -->



<li class='sorting-01 facebook'><a href='https://www.blogger.com/follow-blog.g?blogID=7559214632370258218'><i class='fa fa-sign-in fa-lg'/><span class='inv'/></a></li>

<li class='sorting-04 youtube'><a href='https://www.youtube.com/aldiandreansyah'><i class='fa fa-youtube-square fa-lg'/><span class='inv'/></a></li>

<li class='sorting-06 linkedin'><a href='https://www.instagram.com/kivliie_sholawaters'><i class='fa fa-instagram fa-lg'/><span class='inv'/></a></li>

<li class='sorting-03 googleplus'><a href='https://plus.google.com/+aldiandreansyah'><i class='fa fa-google-plus-square fa-lg'/><span class='inv'/></a></li>

<li class='sorting-02 twitter'><a href='https://twitter.com/mr_kivliie'><i class='fa fa-twitter-square fa-lg'/><span class='inv'/></a></li>

<li class='sorting-01 facebook'><a href='https://www.facebook.com/kivliiesholawaters'><i class='fa fa-facebook-square fa-lg'/><span class='inv'/></a></li>

<!-- social media button end -->

</ul>

</nav>



    </b:if>

  <div class='clear'/>

  <!-- secondary navigation menu end -->

Langkah Terakhir :
sekira nya cukup sampai disini menu navigasi sobat sudah responsive.

tapi jika ingin membuat Menu Navigasi dan Sosial Media nya agar Melayang Tersebut Responsive silahkan Copy and Paste JQuery di bawah tepat di bagian atas </body> :

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

    var stickyNavTop = $('#menutop').offset().top;

    var stickyNav = function(){

        var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) {

            $('#menutop').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

        } else {

            $('#menutop').css({ 'position': 'relative' });

        }

    };

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

KETERANGAN :
Silahkan sobat ubah sendiri kode kode atau URL yang berbeda dengan URL yang sibat miliki

Mungkin cukup sekian Artikel yang bertentangan Blogger yang berjudul Cara Membuat Menu Navigasi dan Sosial Media Responsive di Atas Header Blog , Saya harapkan Semoga Bermanfaat dan Work 100%, Amin

Share this post