MENU WEBSITE, FLOATING MENU CSS HTML

MENU WEBSITE, FLOATING MENU CSS HTML
Untuk sebagian besar pecinta blog atau website tampilan website baik mlai dari layout, warna dan menu - menu tentu saja menjadi perhatian utama, selain dari isi kontent yang di tawarkan style dalam sebuah website juga menjadi bagian utama untuk membuat visitor nyaman dan betah berlama - lama di dalam website kita.
banyak yang perlu diterapkan untuk bisa memenuhi semua keinginan terutama dalam membuat tampilan website kita menjadi menarik dan nyman bagi pengunjung, salah satunya dengan membuat style menggunakan css.
lalu kita coba ingin membuat sebuah menu yang sesuai dengan website kita, kali ini akan saya bagikan cara membuat sebuah floating menu fixed, yaitu kita akan membuat menu dimana menu ini akan selalu berada di atas atau di bawah pada layar.
secara umum kita akan menerapkan yaitu perintah position:fixed; untuk membuat menu tersebut akan tetap pada posisinya meskipun di scroll keatas maupun ke bawah, dengan adanya perintah fixed artinya dia tidak akan terpengaruh dalam keadaan apapun oleh kondisi di dalam website tersebut.
untuk script simplenya adalah .responsip{position:fixed;bottom:0;left:0;height:60px;background:#eeeeee;width:100%;} .responsip>.menu{width:25%;float:left;text-align:center;padding:10px;height:100%;border:2px solid #dddddd;} disini nama class utamanya adlah .responsip itu bisa di ganti sesuai keinginan kita, maka untuk penggunaannya adalah
untuk class kedua yaitu menu yang akan kita tampilkan atau list menu utaman, disitu terlihat angka 25% yang artinya akan ada 4 menu utama yang akan kita terapkan, jika ingin membuat 5 mrnu bisa kita ubah menjadi 20% artinya 100 di bagi 20. untuk penerapannya jika digabungkan
secara umum tag div adalah displaynya block, maka pada class .menu kita beri perintah floaf:left yang artinya akan di dorong kekiri dan tidak lagi menyusun ke bawah melainkan sejajar menyamping, untuk script lingkapnya ini merupakan tampilan floting menu secara umum, akan kurang menarik jika tampilan ini di terapkan pada desktop, tampilan ini terlihat menarik jika di terakan pada phonecell atau tablet, maka kita butuh membuat css untuk responsipnya, silahkan buka tentang membuat css responsip.
Ditulis oleh: Admin

Tanggal: 16-09-2021 Pembaruan : 4 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar