در این مقاله می آموزیم که چطور با استفاده از کدهای CSS، دکمه های شناور نوار جانبی بسازیم.
چگونه یک side navigation شناور ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
Hoverable Sidenav Buttons
Hover over the buttons in the left side navigation to open them.
قدم دوم : برای ساخت سایدبار شناور باید از دستورات CSS زیر استفاده کنیم.
مثال ساخت ساید بار شناور :
#mySidenav a {
position: absolute;
left: -80px;
transition: 0.3s;
padding: 15px;
width: 100px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
}#mySidenav a:hover {
left: 0;
}#about {
top: 20px;
background-color: #4CAF50;
}#blog {
top: 80px;
background-color: #2196F3;
}#projects {
top: 140px;
background-color: #f44336;
}#contact {
top: 200px;
background-color: #555
}
