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.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
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 *