Cara Membuat Menu Tetap di sebelah kiri
Saya bingung ingin menulis apa mengenai judulnya karena, jadi maksud dari judul tersebut ialah ketika teman-teman mempunyai sebuah fitur, dan sebuah isi konten di sebelah kanan, dimana kontent tersebut mempunyai isi yang panjang, dan ketika kita ingin melihat isinya kita mesti scroll terlebih dahulu, tetapi posisi fitur yang terdapat di sebelah kiri tetap di posisinya, seperti itu ya, karenanya dari itu disini saya akan coba merancang fitur tetapnya.
Paham ya apa yang saya maksud di atas, dan pasti teman-teman sendiri telah pernah melihat ya, ada yang teta di atas ada yang di kiri yang akan kita bikin sesaat lagi. Sesungguhnya lumayan simple bagi membuatnya di karenakan. bagi merancang fitur seperti itu sesungguhnya kita hanya butuh position fixed, ada pun yang baru position sticky, dan disini saya akan mencoba menggunakannya position fixed ya, oke seketika saja silahkan teman-teman lihat bagi 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 ialah HTMLnya dan kini 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;
}
Bagi CSSnya silahkan teman-teman perhatikan class leftnya, disitu saya berikan position fixednya ya. Bagi yang lain teman-teman pasti telah paham ya, oke kalau ada yang mau di tanyakan silahkan komentar di bawah ya teman-teman, saya rasa lumayan hingga disini belajar kita mengenai Cara Merancang Fitur Tetap di sebelah kiri, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
