میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

ساخت یک نوار هدایتی در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش ساخت یک نوار هدایتی ( Navigation Bar ) در CSS با من همراه باشید.

برای استفاده آسان، وجود Navigation Bar یک بخش بسیار مهم برای وب سایت ها محسوب می شود.

با CSS می توان، منوهای خسته کننده HTML را به Navigation Bar های زیبا تبدیل کرد.


Navigation Bar

navigation bar یا نوار هدایتی، اساساً لیستی از لینک هاست که با استفاده از عناصر <ul> و <li> ساخته می شوند:

مثال (ساخت یک نوار هدایتی در CSS)

<ul>
<li><a href="/default.asp">Home</a></li>
<li><a href="/news.asp">News</a></li>
<li><a href="/contact.asp">Contact</a></li>
<li><a href="/about.asp">About</a></li>
</ul>

حالا اجازه دهید تا bulletها ، margin و padding را از لیستمان حذف کنیم:

 

مثال (ساخت یک نوار هدایتی در CSS)

ul
{
list-style-type:none;
margin:0;
padding:0;
}

توضیح مثال بالا:

  • list-style-type:none – علامت ها یا bulletها را حذف می کند، یک navigation bar احتیاجی به علامت گذاری لیست ها ندارد.
  • خصوصیت margin و padding را با مقدار ۰ تنظیم می کنیم، تا تنظیمات پیشفرض مرورگر را حذف کنیم.

کد مثال بالا یک کد استاندارد است که هم در لینک های افقی و هم در لینک های عمودی استفاده می شود.


Navigation Bar عمودی

برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار “block” تنظیم کنیم:

a
{
display:block;
width:60px;
background-color:#dddddd;
}

مثال (ساخت یک نوار هدایتی در CSS)

توضیح مثال بالا:

  • با تنظیم خصوصیت display با مقدار “block” تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که ۶۰ پیکسل از یک خط را اشغال کند.

توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.


Navigation Bar افقی

دو راه برای ساخت Navigation Bar افقی وجود دارد. استفاده از لیست های inline یا floating

هر دو روش بخوبی کار خواهد کرد، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.

لیست های inline

یک راه برای ساخت navigation bar افقی این است که عناصر <li> را به صورت inline مشخص کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

li
{
display:inline;
}

توضیح مثال بالا:

  • به صورت پیشفرض یک عنصر <li> تمام فضای یک خط را اشغال می کند، با تنظیم خصوصیت display با مقدار “inline” شکستگی خط قبل و بعد هر لیست حذف خواهد شد، بنابراین تمام عناصر <li> در یک خط نمایش داده می شوند.


Floating

در مثال بالا، لینک ها عرض های متفاوتی دارند.

برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:

مثال (ساخت یک نوار هدایتی در CSS)

li
{
float:left;
}
a
{ display:block;
width:60px;
}

توضیح مثال بالا:

  • در گزینشگر li با تنظیم خصوصیت float با مقدار “left” تمام عناصر <li> در کنار یکدیگر (در یک خط) قرار می گیرند.
  • در گزینشگر a با تنظیم خصوصیت display با مقدار “block” تمام عناصر <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
  • عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که ۶۰ پیکسل از یک خط را اشغال کند.

 

 

 


امیدواریم آموزش ساخت یک نوار هدایتی در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساخت یک نوار هدایتی در CSSساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟