یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84 دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84
🎯 ثبت نام

آموزش ساخت منو دارای border در وبسایت

در این مقاله می آموزیم که چطور با استفاده از CSS لینک های navigation ایجاد کنیم که زمانی که موس را بر روی هر لینک می بریم در پایین آن underline یا یک حاشیه نشان داده شود.



ساخت منوNavigation


قدم اول : کد HTML را اضافه کنید.

1
2
3
4
5
6
7
8
9
10
11
<div class="topnav">
<a class="active" href="#home">خانه</a>
<a href="#news">اخبار</a>
<a href="#contact">تماس با ما</a>
</div>
 
<div class="Content">
<h2>لینک های Border</h2>
<p>موس خود را بر روی لینک ها نگه دارید</p>
</div>
<button></button>


قدم دوم :   برای ایجاد border از دستورات CSS زیر استفاده کنید.

مثال ایجاد border برای منو :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p>body {<br>
margin:0;<br>
direction: rtl;<br>
}</p>
 
<p>.topnav {<br>
  overflow: hidden;<br>
  background-color: #f1f1f1;<br>
}</p>
 
<p>.topnav a {<br>
  float: right;<br>
  display: block;<br>
  color: black;<br>
  text-align: center;<br>
  padding: 14px 16px;<br>
  text-decoration: none;<br>
  font-size: 17px;<br>
  border-bottom: 3px solid transparent;<br>
}</p>
 
<p>.topnav a:hover {<br>
  border-bottom: 3px solid red;<br>
}</p>
 
<p>.topnav a.active {<br>
  border-bottom: 3px solid red;<br>
}<br>
.Content {<br>
padding-right:16px;<br>
}</p>
<button></button>
امتحان کنید

توجه :  برای ایجاد navigation bar های واکنش گرا که با صفحات موبایل نیز سازگار باشند، پروژه ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.

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

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