CSS : Membuat Fixed Sidebar

css

CSS lagi CSS lagi!
hahaa..
Semoga tidak ada yang nggrundel seperi itu 😀
lha piye, terserah saya yang punya blog ini.. hehe

Ngomong-ngomong, sudah pernah lihat website atau web based application yang sidebar-nya gagal move on?
Alias selalu diposisi yang sama walaupun kita scroll terus kebawah
Itu namanya fixed sidebar

Teknik ini sangat baik diterapkan jika kita membangun aplikasi web yang memiliki konten yang sangat panjang kebawah dan kita ingin tetap menjaga kemudahan navigasi aplikasi.
Contoh yang sudah ada didepan mata teman-teman adalah kotak chat pada facebook.
Dia tetap ada disitu walaupun kita scroll terus kebawah.

Sekarang bagaimana membuatnya?
tidak susah ternyata, kabar baik bagi kita semua 😀

Kita buat dahulu HTML-nya

Sekarang tambahkan CSS nya seperti ini

Sekarang coba tengok di browser
pasti si sidebar gagal move on heheehe 😀

Trik utamanya berada pada bagian position:fixed dari sidebar

Yang tidak kalah penting adalah margin-left dari content

Margin left diatas akan mendorong content keposisi kanan
Untuk melihat betapa penting kerjanya coba teman-teman hilangkan bagian tersebut
Pasti akan kacau balau 😛

Oh iya untuk DEMO silahkan dilihat dilink berikut ini

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Seorang Software Engineer di BukaLapak, penulis buku, blogger, gunpla builder, tech educator.
Simak pemikiran saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *