در این مقاله می آموزیم که چطور یک منوی پیمایشی ثابت با کد CSS ایجاد کنیم. یک نوار کناری (Sidebar) ثابت ایجاد کنید .
منو ساید بار با ارتفاع تمام صفحه در وب سایت
قدم اول : کد HTML را اضافه کنید.
قدم دوم : کد CSS زیر را اضافه کنید.
مثال ساخت منو ساید بار با ارتفاع تمام صفحه :
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
direction: rtl;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-right: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
direction: rtl;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
منو ساید بار با ارتفاع خودکار در وب سایت
قدم اول : کد HTML را اضافه کنید.
قدم دوم : کد CSS زیر را اضافه کنید.
مثال ساخت منو سایدبار با ارتفاع خودکار :
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
right: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
direction:rtl;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-right: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
direction:rtl;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
توجه : برای اینکه بتوانید منو جانبی پیمایشی در حالت های مختلف که قابل بسته شدن نیز باشد، به بخش آموزش ایجاد ساید بار شناور مراجعه کنید.