مشخصات مقاله
-
494
-
0.0
-
3016
-
0
-
0
آموزش ساخت منو عمودی در طراحی وب سایت
در این مقاله می آموزیم که چطور با استفاده از کد CSS منو عمودی ایجاد کنیم.
ساخت منو عمودی همراه با گروهی از دکمه ها
قدم اول : کد HTML زیر را وارد کنید.
1 2 3 4 5 6 7 8 9 10 | <h1>منو عمودی</h1><div class="vertical-menu"><a href="#" class="active">خانه</a><a href="#">لینک 1</a><a href="#">لینک 2</a><a href="#">لینک 3</a><a href="#">لینک 4</a></div><button></button> |
قدم دوم : برای ساخت منو عمودی از دستور CSS زیر استفاده کنید.
مثال ساخت منو عمودی :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <p>body {<br>direction: rtl;<br>}<br>.vertical-menu {<br> width: 200px;<br>}</p><p>.vertical-menu a {<br> background-color: #eee;<br> color: black;<br> display: block;<br> padding: 12px;<br> text-decoration: none;<br>}</p><p>.vertical-menu a:hover {<br> background-color: #ccc;<br>}</p><p>.vertical-menu a.active {<br> background-color: #4CAF50;<br> color: white;<br>}</p><button></button> |
منو عمودی با قابلیت اسکرول کردن
اگر میخواهید یک منوی عمودی با قابلیت اسکرول کردن طراحی کنید، به ویژگی height مقدار داده و مولفه overflow را اضافه کنید. برای مثال به دستورات CSS پیشین مقادیر زیر را نیز اضافه کنید.
مثال ساخت منو عمودی با قابلیت اسکرول :
1 2 3 4 5 6 | <p>.vertical-menu {<br> width: 200px;<br> height: 150px;<br> overflow-y: auto;<br>}</p><button></button> |
توجه : برای یادگیری چگونگی ساخت ساید باری ثابت و تمام صفحه، به بخش آموزش ایجاد سایدبار شناور مراجعه کنید.