08

MENU DESAIGN LAYOUT, MEMBUAT MENU RESPONSIVE DENGAN MUDAH

Melihat era sekarang dengan banyaknya gadget yang dirilis di pasaran, para perancang website ditantang untuk menciptakan beberapa versi situs web.
Hal ini berlaku untuk layar dan browser pada setiap gadget.
Desain responsif yang mapu menyesuaikan desain website dengan ukuran gedget menjadi solusi terbaik agar suatu laman bisa diakses melalui perangkat apa saja dan tetap terlihat menarik. hal ini menjadi pengembangan web yang memanfaatkan desain fleksibel agar dapat beradaptasi di berbagai platform, layar, orientasi, bahkan layar TV yang besar sekalipun. Bisa dikatakan hal ini bertujuan agar dapat digunakan di seluruh perangkat yang ada.
Desain website yang responsive menggunakan CSS atau sering dikenal dengan Cascading Style Sheets. Teknologi ini digunakan untuk membuat desain dan tata letak yang yang dapat diperluas tanpa mempengaruhi fungsi utamanya. Seperti contoh, jika pengguna beralih menggunakan ponsel  Android ke laptop Windows, situs akan menyesuaikan sendiri secara otomatis.
untuk menerapkan itu kita membuat css dengan menambahkan target layar yang kita inginkan, namun secara umun biasanya kita hanya menggunakan 2 mode saya veri phone cell dan desktop seperti saya contohkan ini contoh css versi desktop
ini dengan versi desktop kita membuat tmpilan menu ada di atas bagian kanan layar. Kemudian kita ingin membuat responsivenya untuk versi handphone maka
disitu terlihat perbadaannya untuk tampilan versi desktop dan pada handphone dengan membungkus css dengan @media only screen and (max-width: 768px) yang artinya jika lebar layar di bawah 768px maka menu akan berubah berada di bawah dan jika di buka melalui kmputer atau laptop maka menu akan berada di atas pojok kanan layar. untuk melihak demonya bisa di lihat pada demo floating menu responsip.
Ditulis oleh: Admin

Tanggal: 08-08-2022 Pembaruan : 3 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar

GOOGLE REVIEW BUTTON, GOOGLE REVIEW BUTTON FOR WEBSITE
SUBMIT GOOGLE REVIEW, UNTUK GOOGLE SEO
BASIC PHP CODE, PHP CODE UNTUK PEMULA
LINK BUILDING STRATEGY, SEO LINK BUILDING UNTUK WEBSITE

Galeri