HTML و CSS

آموزش برنامه نویسی CSS – ساخت Navigation Bar با CSS

درود

Navigation Bar (نوار هدایت)
داشتن Navigation با کاربری آسان ، برای هر وب سایتی مهم است.
با CSS شما می توانید منوهای HTML خسته کننده را به نوار هدایتی با ظاهری خوب ، تبدیل کنید .
نوار هدایت – لیست لینک ها
یک نوار هدایت به HTML استانداردی به عنوان پایه و اساس نیاز دارد.
در نمونه ها ، ما نوار هدایت را از یک لیست HTML استاندارد خواهیم ساخت.
اساسا یک نوار هدایت یک لیست از لینک ها است ، بنابراین استفاده از عناصر

    و

  • باعث می شود که مفهوم کاملی ایجاد شود :
حالا بیایید bullet و margin و padding را از لیست حذف کنیم:
توضیح نمونه :

list-style-type:none – bullet را حذف می کند. یک نوار هدایت نیاز به نشانگر لیست ندارد
برای حذف تنظیمات پیش فرض مرورگر margins و padding را بر روی ۰ تنظیم می کند

کد در نمونه بالا کد استاندارد مورد استفاده در هر دو میله های هدایت عمودی و افقی است.
نوار هدایت عمودی
برای ساختن یک نوار هدایت عمودی علاوه بر کد بالا به استایل دهی به عناصر نیز نیاز داریم:

توضیح نمونه:

display:block – نمایش لینک به عنوان عناصر بلوک ، کل منطقه لینک را قابل کلیک می کند (نه فقط متن) و این به ما برای تعیین عرض اجازه می دهد
width:60px – عناصر بلوک عرض کامل پیش فرض در دسترس را می گیرند. ما می خواهیم به ۶۰ پیکسل عرض مشخص کنیم

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا عمودی ما بیاندازید.
توجه: همیشه عرض عناصر در نوار هدایت عمودی را مشخص کنید. اگر شما عرض را فراموش کنید، IE6 می تواند نتایج غیر منتظره ای را تولید کند.
نوار هدایت افقی
دو راه برای ایجاد یک نوار هدایت افقی وجود دارد. با استفاده از اقلام لیست درون خطی و یا متغیر .
هر دو متد به خوبی کار می کنند ، اما اگر شما می خواهید لینک ها به یک اندازه باشند ، باید از متد شناور استفاده کنید.
اقلام لیست درون خطی
یکی از راه های ساخت یک نوار هدایت افقی ، مشخص کردن عناصر

 

توضیح نمونه :

display:inline – به طور پیش فرض، عناصر

  • عناصر بلوک هستند. در اینجا، پرش به خط قبل و بعد از هر یک از اقلام لیست را حذف می کنیم ، تا آنها را در یک خط نشان دهیم

 

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا افقی ما بیاندازید.
اقلام لیست متغیر (floating)
در نمونه بالا لینک ها ، عرض های مختلفی دارند.
برای اینکه تمام لینک ها عرض برابری داشته باشند ، عناصر

 

به عنوان نمونه توضیح داد:

float:left – استفاده از متغیر برای اسلاید کردن عناصر بلوک بعد از یکدیگر
display:block – نمایش لینک به عنوان عناصر بلوک ، کل منطقه لینک را قابل کلیک می کند (نه فقط متن) و این به ما برای تعیین عرض اجازه می دهد
width:60px – از آنجا که عناصر بلوک عرض کامل در دسترس را می گیرند ، نمی توانند در کنار یکدیگر متغیر باشند. ما عرض هر یک از لینک ها را ۶۰px مشخص می کنیم

نکته: همچنین نگاهی به نمونه نوار هدایت کاملا افقی ما بیاندازید.
و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.

پاسخ دهید

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