این آموزش در تاریخ ۱۳۹۸/۰۲/۱۳ آپدیت شده است.
آموزش تگ nav در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ nav در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ nav تگی است که با استفاده از آن میتوان یک منوی ناوبری یا Navigation Menu که از تعدادی لینک تشکیل شده است را ایجاد نمود.
وقتی میگیم منوی ناوبری ، یعنی بطور کلی منویی که بتونه کاربر رو به بخش های مختلف یک سایت منتقل کنه، جوری که کاربر بتونه با یک نگاه متوجه شه چه نوع مطالبی با چه دسته بندی هایی در این سایت قرار داده شده است.
سوال : آیا لینک هایی که در قسمت منو قرار میگیرند با لینک هایی که در محتوای سایت یا صفحات سایت قرار میگیرد فرق دارند؟
پاسخ : بله و صددرصد که فرق دارند، لینک هایی که در قسمت منو قرار میگیرند میتونیم اینجوری بگیم که این لینک ها لینک های والد هستن، لینک هایی که میتونن یک دسته از مطالب سایت را مشخص نمایند.
ادامه پاسخ : برای مثال همین منوی اصلی فری لرن رو نگاه کنید، ما در این منو یک لینک داریم به اسم [آموزش HTML] که اگه روش کلیک کنید میتونید باز تعداد زیادی از لینک ها (که در واقع همون مطالب سایت هستن) رو مشاهده نمایید.
ادامه پاسخ : پس، لطفا توجه داشته باشید که لینک های محتوارو درون قسمت منوی ناوبری قرار ندهید، یعنی اون لینک هایی که براتون ارزش محتوایی دارند و تو محتوا باید وجود داشته باشن رو سعی کنید درون منوی ناوبری قرار ندهید.
سوال : خب چرا نباید لینک هایی که باید تو محتوای سایت باشند رو درون منوی ناوبری گذاشت، مگه اشکالش چیه؟!
پاسخ : چون ممکنه بعضی از مرورگرها و یا نرم افزارهای صفحه خوان (مناسب برای افراد نابینا) برای اینکه بهتر بتونن محتوارو پردازش کنند و یا بطور کلی رندر (Rendering) کنن، میان و لینک های قسمت منوی ناوبری رو بصورت خودکار حذف میکنن، برای همین سعی کنید همه ی لینک هاتون رو درون منوی ناوبری قرار ندهید.
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">Test1</a> | <a href="#">Test2</a> </nav> </body> |
مثال شماره ۲ : سفارشی سازی تگ nav با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> nav{ background-color:#2196F3; overflow:auto; padding:5px; } nav a{ color:#fff; padding:5px; text-decoration:none; } nav a:hover{ background-color:#607D8B; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ nav در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | ۶٫۰ | ۴٫۰ | ۱۱٫۱ | ۵٫۰ | ۹٫۰ |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ nav از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ nav یک تگ جدید/اضافه شده در HTML5 می باشد.
ما با استفاده از تگ ul نیز میتوانیم منوی ناوبری هم بصورت افقی و هم عمودی ایجاد نماییم. ( مثال برای منوی افقی و مثال برای منوی عمودی )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ nav را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
nav { display: block; } |
