مشخصات مقاله
آموزش ساخت منو دارای 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