در این مقاله می آموزیم که چطور با استفاده از کد CSS، منوی side navigation ایجاد کنیم.
قدم اول : کد HTML را اضافه کنید.
مثالی از سایدبار ریسپانسیو
در این مثال از مدیاکوئری استفاده می کنیم تا سایدبار را در حالتی که اندازه اسکرین برابر با 700px یا کوچکتر از آن است، به بالا صفحه انتقال داده شود.
علاوه بر این، از دستورات مدیا کوئری مجدد استفاده می کنیم تا بتوانیم برای حالتی که اندازه اسکرین برابر با 400px یا کمتر است، لینک ها بصورت عمودی و در مرکز صفحه قرار گیرند.
اندازه پنجره مرورگر خود را تغییر دهید تا تاثیرات ریسپانسیو را ببینید.
قدم دوم : کد CSS را اضافه کنید.
body {
font-family: "Lato", sans-serif;
}.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}.sidenav a:hover {
color: #f1f1f1;
}.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
