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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<body> <div id="wrapper"> <div id="sidebar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <!-- bikin paragraf sebanyak mungkin sampai halaman bisa discroll kebawah --> </div> </div> </body> |
Sekarang tambahkan CSS nya seperti ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
body{ background: #EBEBEB; overflow-y: scroll; overflow-x: hidden; } #wrapper{ width: 960px; margin: 0 auto; } #sidebar{ background: #DEDEDE; width: 190px; float: left; position: fixed; padding: 5px; } #content{ float: left; width: 760px; margin-left: 200px; padding: 10px; background: #F5EDF0; } ul{ background: pink; padding: 5px; } ul li{ list-style-type: none; border-bottom: 1px solid #F5EDF0; } ul li a{ text-decoration: none } |
Sekarang coba tengok di browser
pasti si sidebar gagal move on heheehe 😀
Trik utamanya berada pada bagian position:fixed dari sidebar
|
1 2 3 4 5 6 7 |
#sidebar{ background: #DEDEDE; width: 190px; float: left; position: fixed; padding: 5px; } |
Yang tidak kalah penting adalah margin-left dari content
|
1 2 3 4 5 6 7 |
#content{ float: left; width: 760px; margin-left: 200px; padding: 10px; background: #F5EDF0; } |
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
