Sekarang ini banyak sekali bermunculan website-website baru dengan tampilan yang menarik. Salah satu hal yang sangat populer pada tampilan website sekarang ini adalah adanya menu yang berada diatas dengan posisi fixed. Pada tutoprial kali ini kita akan mencoba membuat menu fixed dengan CSS. Menu fixed ini akan kalian temui pada website jaman sekarang, karena memberikan kenyamanan pada user saat website terlalu panjang sehingga tak perlu scroll ke atas untuk memilih menu lagi melainkan menu tersebut akan berada dibagian atas browser kalian. Dan juga karena sekarang kebanyakan user browsing menggunakan handphone maka metode menu fixed ini sangat cocok untuk mobile.

Lalu bagaimana cara membuat menu fixed tersebut ?

Untuk membuat menu fixed sangatlah mudah. Yang perlu kalian siapkan adalah pengetahuan dasar mengenai html dan css. Terutama css, karena kalian akan banyak sekali bermain dengan css. Langsung saja kita mulai ya. Pertama kalian buat terlebih dahulu struktur html dasarnya. Kalian bisa ikuti contoh code html ini.

menu.html

Lalu buat file cssnya

style.css

Setelah keduanya disave, kalian bisa lihat hasilnya dibrowser. Jika berhasil maka akan seperti ini.

Hasil menunya belum terlihat. Sekarang coba kalian tambahkan text yang panjang, agar penuh sampai kebawah browser sehingga harus discroll. Kalian bisa duplikasi div posting jadi banyak agar lebih cepat. Jika sudah maka harusnya seperti ini apabila discroll.

Saat discroll

Menunya tetap berada diatas, lalu text yang sebelumnya seakan tenggelam. Mudah bukan ?

Oke sekian pembahasan mengenai cara membuat menu fixed dengan CSS. Semoga bermanfaat.