Fixed Navbar Kompi Asing Responsive
Ada beberapa sobat Kompi Ajaib yang request cara menciptakan navbar yang melayang (fixed navbar) yang digunakan di Kompi Ajaib. Untuk itu kali ini aku akan membagikan kode-kode fixed navbar yang digunakan di Kompi Ajaib. Navbar ini sudah responsive dan di dalamnya terdapat search box, show hide sajian vertical, dan show hide Google Translator.
Namun fixed navbar ini pada lebar device 600px aku buat menjadi tidak melayang alasannya yakni tinggi navbarnya 115px biar tidak menghalangi layar device-nya. Cukup banyak juga kode-kode yang menyusunnya alasannya yakni terdiri dari 3 widget di dalamnya, jadi jangan kaget ya hehehe.... Sebagai patokan, silahkan baca juga postingan-postingan widget-widgetnya di link bawah ini.
Baca juga:
- Untuk mengganti URL dan lainnya pada search boxnya silahkan baca DI SINI.
- Membuat Slide Vertical Menu Dengan Jquery
- Show Hide Google Translator Widget
Karena kode-kodenya banyak, jadi aku tidak akan tulis kode-kodenya di halaman ini. Silahkan copy kode-kodenya pada iframe JsFiddle di bawah ini.
Untuk isyarat HTML-nya silahkan simpan di bawah isyarat <body> dan untuk elemen yang berada di bawahnya silahkan tambahkan margin-top biar tidak terhalangi oleh navbar ini. Untuk isyarat Javascript silahkan simpan di atas isyarat </body> dan gunakan isyarat di bawah ini
Kode CSS untuk body enggak usah di-copy. Dan tambahkan juga isyarat js translator di bawah ini di atas isyarat </body>
Dan jangan lupa juga, pada templatenya sudah dipasang isyarat jquery library biar widget-widgetnya sanggup jalan.
Sumber https://www.kompiajaib.com/
Untuk isyarat HTML-nya silahkan simpan di bawah isyarat <body> dan untuk elemen yang berada di bawahnya silahkan tambahkan margin-top biar tidak terhalangi oleh navbar ini. Untuk isyarat Javascript silahkan simpan di atas isyarat </body> dan gunakan isyarat di bawah ini
<script type='text/javascript'>
//<![CDATA[
KODE JAVASCRIPT DI SINI
//]]>
</script>Kode CSS untuk body enggak usah di-copy. Dan tambahkan juga isyarat js translator di bawah ini di atas isyarat </body>
<script async='async' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/>Dan jangan lupa juga, pada templatenya sudah dipasang isyarat jquery library biar widget-widgetnya sanggup jalan.
0 Response to "Fixed Navbar Kompi Asing Responsive"
Posting Komentar