مشخصات مقاله
-
489
-
0.0
-
1555
-
0
-
0
آموزش ساخت منو دارای border در وبسایت
در این مقاله می آموزیم که چطور با استفاده از CSS لینک های navigation ایجاد کنیم که زمانی که موس را بر روی هر لینک می بریم در پایین آن underline یا یک حاشیه نشان داده شود.
ساخت منوNavigation
قدم اول : کد HTML را اضافه کنید.
لینک های Border
موس خود را بر روی لینک ها نگه دارید
قدم دوم : برای ایجاد border از دستورات CSS زیر استفاده کنید.
مثال ایجاد border برای منو :
body {
margin:0;
direction: rtl;
}.topnav {
overflow: hidden;
background-color: #f1f1f1;
}.topnav a {
float: right;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}.topnav a:hover {
border-bottom: 3px solid red;
}.topnav a.active {
border-bottom: 3px solid red;
}
.Content {
padding-right:16px;
}
توجه : برای ایجاد navigation bar های واکنش گرا که با صفحات موبایل نیز سازگار باشند، پروژه ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.