یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی
🎯 ثبت نام

آموزش ساخت منو عمودی در طراحی وب سایت

در این مقاله می آموزیم که چطور با استفاده از کد 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>
امتحان کنید

منو عمودی با اسکرول در طراحی وب سایت

توجه :  برای یادگیری چگونگی ساخت ساید باری ثابت و تمام صفحه، به بخش آموزش ایجاد سایدبار شناور مراجعه کنید.

1404/02/02 2990 491
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...