Cara mudah membuat FLOATING MENU FOOTER - Bagian 2

Pada kesempatan kali ini saya akan melanjutkan tutorial sebelumnya tentang cara membuat FLOATING MENU FOOTER Bagian 1 yang mana pada bagian tersebut hanya menampilkan Footer Menu Sticky kosong tanpa fungsi dan seperti yang sudah saya bilang sebelumnya bahwa saya akan membahas tutorial ini menjadi beberapa bagian. Hal tersebut saya lakukan supaya kamu dan yang lainnya tidak kebingungan dengan tutorial yang terlalu panjang. Jadi untuk kamu yang baru bergabung silahkan ikuti dulu tutorial sebelumnya .

Pada bagian dua ini saya akan memberikan tutorial menambahkan tabel menu slide yang nantinya bisa kita gunakan untuk menempatkan Main Menu blog kita atau bisa kamu isi apa saja entah itu bio kamu gambar atau lainnya. Untuk DEMO bagian dua ini bisa kamu lihat DISINI ok langsung saja pada bagian dua ini kita akan menambahka beberapa CSS HTML dan jQuery, itu sebabnya kenapa pada bagian satu saya menambahkan script jQuery untuk kamu terapkan pada template karena kita akan menggunakan jQuery untuk membuat semua script berfungsi.

Baca Juga

• Memunculkan Fitur Pencarian Saat Edit Template Blog Di HP Android
• Cara agar gambar utama blog berada di atas judul

SCRIPT YANG DIGUNAKAN

Berikut ini adalah skrip yang akan kita tambahkan pada skrip sebelumnya.

HTML / doble click to select

<div class='tabel-wraper'> </div><div class='tabel-menu'> <div class='tabel-header'> </div> <div class='tabel-body'> </div> <div class='tabel-footer'> <div class='close'>CLOSE</div> </div> </div>

CSS / doble click to select

.tabel-wraper { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #0007; width: 0; height: 100%; z-index: 100; } .tabel-menu { width: 350px; height: 100%; z-index: 101; position: fixed; background: #fff; left: -500px; top: 0; transition: all ease .5s; } .tabel-header{ height: 80px; background: #6667; } .tabel-body{ right: 0;left:0; position: absolute; bottom: 50px;top:80px; padding: 15px; color: #000; } .tabel-footer{ right:0; color: #666; padding: 0 10px; height: 50px; display: flex; align-items: center; left:0;bottom:0; position: absolute; } #show{display:none} .pemberitahuan { position: fixed; left: 45px; bottom: 60px; z-index: 210; color: green; transition: all ease 3s; }

jQuery / doble click to select

<script>$(document).ready(function(){ $(".fa-bars").click(function(){ $(".tabel-menu").css("left","0px") $(".tabel-wraper").css("width","100%") $(".pemberitahuan").css("left","25px") $(".pemberitahuan").css("bottom","40px"); }); $(".tabel-wraper,.close").click(function(){ $(".tabel-menu").css("left","-500px") $(".tabel-wraper").css("width","0") $(".fa-times").toggleClass("fa-bars fa-times") $(".pemberitahuan").css("display","none"); }); }); </script>

Pada tiga tab diatas saya mempunyai 3 skrip yaitu HTML CSS JavaScript (jQuery) jadi jangan salah penempatannya ya. Untuk skrip html yaitu terdiri dari beberapa bagian yaitu tabel-wraper yang berfungsi mencegah klik diluar tabel sekaligus berfungsi sebagai tombol close jika disentuh lalu tabel-menu yang menampung 3 bagian lainnya yaitu tabel header yang bisa kamu isi foto / nama atau apa saja, selanjutnya tabel-body yang akan kita isi dengan main menu (menu utama blog) akan saya bahas di artikel selanjutnya. kemudian ada tabel-footer yang letaknya nanti dibagian bawah tabel bisa kamu isi dengan apa ajah termasuk tombol close yang sudah saya sertakan didalamnya, kamu bisa ubah tulisan close menggunakan icon yang kamu punya.

TUTORIAL

1. Pertama supaya penempatannya tidak acak-acakan saya sarankan untuk menempatkannya setelah masing-masing script pada tutorial pertama (opsional) seperti berikut. letakan skrip HTMLnya tepat diatas atau dibawah HTML sebelumnya gabung keduanya hingga tampak seperti
   
2. Kemudian lakukan hal yang sama pada CSS nya yaitu menempatkannya di atas/bawah CSS sebelumnya.
   
   
3. Selanjutnya untuk script yang ketiga yaitu jQuery skrip yang akan membuat ini bekerja, untuk menempatkan skrip ini kamu bisa menempatkannya di atas tag </body> yaitu dengan cara edit html pada template kamu. atau untuk yang kemarin menempatkannya didalam widget kamu bisa menyatukannya dalam satu widget tepatnya dibagian akhir skrip-skip tersebut. Selesai.

Dengan begitu sekarang footer menu yang kalian buat sudah mempunyai tabel menu yang bisa ditampilkan atau disembunyikan. silahkan kalian ubah tampilannya sesuai selera. untuk menambahkan main menu tutup buka nya akan saya bahas pada artikel selanjutnya.