Membuat Sajian Header Responsive Pure Css With Translate

Masih banyak fitur-fitur dari template Maskolis yang belum dishare cara membuatnya oleh Maskolis. Salah satunya adalah sajian header responsive yang selalu Maskolis gunakan untuk template-template responsivenya. Menu responsive ini tidak meggunakan javascript, jadi hanya memakai CSS sehingga keberadaannya tidak menambah beban blog.

Untuk itu sekarang aku share cara menciptakan sajian header responsive ini dengan sedikit modifikasi semoga tampilannya sesuai dengan sajian header Kompi Ajaib sebelumnya dan ditambah translator untuk bahasa Inggris. Menu header responsive ini aku pakai juga di blog ini.

DEMO

Bagi yang tertarik untuk mencobanya silahkan copy kode-kodenya di bawah ini.

Silahkan copy instruksi CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}

Kemudian tambahkan juga instruksi CSS responsive di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>. Jika di blog Anda sudah ada CSS responsivenya silahkan tambahkan saja pada CSS responsive yang sudah ada.

@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ul{display:block}
}

Terakhir silahkan gunakan instruksi pemanggilnya di bawah ini.

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Membuat Menu Header Responsive Pure CSS With Translate">Home</a></li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Menu 1</a></li>
<li><a class='prett' href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 1</a></li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 2</a></li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Menu 2</a></li>
<li><a class='prett' href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 1</a></li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 2</a></li>
<li><a href='#' title="Membuat Menu Header Responsive Pure CSS With Translate">Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

Silahkan ganti tanda "/" atau "#" dengan url tujuan menu. Dan untuk warna menunya silahkan sesuaikan dengan tema blog Anda dengan memodifikasi warnanya pada instruksi CSS-nya.

Selamat mencoba....

Sumber https://www.kompiajaib.com/

Share this post