مشخصات مقاله
-
463
-
0.0
-
1736
-
0
-
0
آموزش ساخت لینک های هم عرض در منو با استفاده از css
در این مقاله می آموزیم که چطور با استفاده از دستورات HTML, CSS یک navigation bar با لینک های هم عرض ایجاد کنیم.
ابتدا یک navigation bar واکنش گرا بسازید
قدم اول : کد HTML را اضافه کنید.
نوارهای پیمایشی ریسپانسیو با لینک های هم عرض
اندازه پنجره مرورگر را تغییر دهید تا تاثیر قابلیت ریسپانسیو را ببینید
قدم دوم : برای ساخت منویی با لینک های هم عرض از کد CSS زیر استفاده می کنیم.
مثال ساخت منو با لینک های هم عرض :
* {box-sizing: border-box}
body {
font-family: Arial, Helvetica, sans-serif;
direction: rtl;
}.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}.navbar a {
float: right;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four links of equal widths */
text-align: center;
}.navbar a:hover {
background-color: #000;
}.navbar a.active {
background-color: #4CAF50;
}@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: right;
}
}