در این مقاله می آموزیم که چطور با استفاده از کد CSS منو عمودی ایجاد کنیم.
ساخت منو عمودی همراه با گروهی از دکمه ها
قدم اول : کد HTML زیر را وارد کنید.
منو عمودی
قدم دوم : برای ساخت منو عمودی از دستور CSS زیر استفاده کنید.
مثال ساخت منو عمودی :
body {
direction: rtl;
}
.vertical-menu {
width: 200px;
}.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}.vertical-menu a:hover {
background-color: #ccc;
}.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
منو عمودی با قابلیت اسکرول کردن
اگر میخواهید یک منوی عمودی با قابلیت اسکرول کردن طراحی کنید، به ویژگی height مقدار داده و مولفه overflow را اضافه کنید. برای مثال به دستورات CSS پیشین مقادیر زیر را نیز اضافه کنید.
مثال ساخت منو عمودی با قابلیت اسکرول :
.vertical-menu {
width: 200px;
height: 150px;
overflow-y: auto;
}
توجه : برای یادگیری چگونگی ساخت ساید باری ثابت و تمام صفحه، به بخش آموزش ایجاد سایدبار شناور مراجعه کنید.