Saya bingung ingin menulis apa tentang judulnya karena, jadi maksud dari judul tersebut adalah ketika teman-teman mempunyai sebuah menu, dan sebuah isi konten di sebelah kanan, dimana kontent tersebut mempunyai isi yang panjang, dan ketika kita ingin melihat isinya kita harus scroll terlebih dahulu, tetapi posisi menu yang ada di sebelah kiri tetap pada posisinya, seperti itu ya, maka dari itu disini saya akan coba membuat menu tetapnya.
Paham ya apa yang saya maksud di atas, dan pasti teman-teman sendiri sudah pernah melihat ya, ada yang teta di atas ada yang di kiri yang akan kita buat sesaat lagi. Sebenarnya cukup simple untuk membuatnya di karenakan. untuk membuat menu seperti itu sebenarnya kita hanya butuh position fixed, ada juga yang baru position sticky, dan disini saya akan mencoba menggunakannya position fixed ya, oke langsung saja silahkan teman-teman lihat untuk kodingan saya seperti ini:
<div class="left"> <ul> <li>Home</li> <li>Profile</li> <li>Contact</li> <li>Prduct</li> <li>Blog</li> </ul> </div> <div class="right"> <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> <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> </div>
di atas adalah HTMLnya dan sekarang kita lihat CSSnya
*{
padding: 0;
margin: 0;
box-sizing: border-box;
color: #2C3A47
}
li{
list-style: none;
line-height: 30px;
padding-left: 20px;
border-bottom: 1px solid #fff;
}
li:hover{
background: #FD7272
}
.left{
width: 160px;
position: fixed;
top: 0;
left: 0;
float: left;
background: red;
height: 100%;
}
.right{
font-size: 30px;
margin-left: 160px;
padding: 10px;
}
Untuk CSSnya silahkan teman-teman perhatikan class leftnya, disitu saya berikan position fixednya ya. Untuk yang lain teman-teman pasti sudah paham ya, oke jika ada yang mau di tanyakan silahkan komentar di bawah ya teman-teman, saya rasa cukup sampai disini belajar kita tentang Cara Membuat Menu Tetap di sebelah kiri, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.
The post Cara Membuat Menu Tetap di sebelah kiri appeared first on Kursus Website Terbaik.