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

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

ساخت منوNavigation

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

<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 برای منو :

<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 1589 507

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما