Thursday, 3 August 2017

Cara Membuat Top Menu Responsive di Atas Header Blog

Cara Membuat Top Menu Responsive di Atas Header Blog, merupakan pembahasan yang akan saya bagikan pada kesempatan kali ini, menu pada sebuah blog umumnya terdapat dibagian bawah header atau tepatnya di bawah logo blog anda. Namun tidak salahnya kita membuat menu tambahan di atas header seperti contoh gambar dibawah ini, tujuan membuat menu di atas ialah untuk menjadikan tampilan blog lebih menarik dan memudahkan pengunjung untuk mencari apa yang mereka inginkan.

Cara Membuat Top Menu Responsive di Atas Header Blog

Berikut ini saya uraikan bagaimana cara membuat top menu responsive di atas header blog :
Langkah ke#1. Masuk ke Blogger -> Template -> Edit HTML
Langkah ke#2. Simpan kode CSS berikut ini diatas kode </head>  
<style>#menutop{width:100%;max-width:960px;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;;fontsize:30px;fontweight: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;lineheight: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>



Langkah ke#3. Simpan kode HTML berikut ini tepat di bawah kode <body>
<nav id='menutop'>
<input type='checkbox'/>
<label/>

<ul>
<li><a href='/' title='Home'>Home</a></li> 

<li><a href='#' >About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='
#'>Sitemap</a></li>

<li><a href='#'>Disclaimer</a></li>
<nav id='menutop'>
<input type='checkbox'/>
<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>


Catatan :
Untuk tanda pagar (#) silahkan ganti alamat URL yang akan ditampilkan.


Langkah ke#4. Setelah proses diatas selesai semua silahkan "Save Template".


Selanjutnya jika Anda ingin Top Menu dijadikan floating atau statis, maka menunya akan tetap muncul di bagian atas halaman blog jika dicscroll ke bawah.
Silahkan tambahkan kode berikut ini tepat di atas kode </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>



Sekian pembahasan mengenai Cara Membuat Top Menu Responsive di Atas Header blog, selamat mencoba dan semoga bermanfaat.

4 comments: