Cara Membuat Menu Tetap Pada Posisinya

Dalam tutorial kali ini saya ingin membahas bagaimana caranya membuat Menu tetap pada Posisinya atau bisa di sebut juga dengan Fixed Position Menu maksudnya adalah Posisi Menu tidak akan bergerak walaupun kita scroll sampai ke bawah. Contoh gaya seperti ini sudah banyak banget di terapkan oleh para Web Designer untuk mendesain websitenya dan website sosial pun sudah banyak yang menerapkan gaya seperti ini contohnya seperti Twitter, Facebook, dan lain-lainnya.

Oke langsung saja kita praktekan ya teman-teman.

Pertama siapkan file index.html

Buat struktur HTML nya seperti di bawah ini :

CSS

Style untuk id logo :

Style untuk id main dan class menu :

Style untuk id content :

Style untuk footer :

Di CSS id logo dan id main terdapat property CSS position:fxied yang berfungsi untuk membuat posisi elemen tersebut tidak berubah-ubah saat kita scroll dan untuk mengatur letak content agar berada tepat di bawah menu gunakan property CSS top: dan bottom:.

Untuk melihat hasilnya silahkan lihat DEMO dan untuk mendownload source nya bisa di download di SINI.

Selamat mencoba teman-teman semoga berguna untuk mendesain website teman-teman agar terlihat lebih menarik lagi.