خانه آموزش HTML آموزش تگ های HTML آموزش تگ nav در HTML

آموزش تگ nav در HTML

توسط

۱۳۹۸-۰۲-۱۰

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ nav در HTML با من همراه باشید.

آموزش تگ nav در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 تگ Nav در HTML
2 مثال از تگ nav در HTML
3 پشتیبانی مرورگرها
4 پشتیبانی از صفات و رویدادهای عمومی
5 نکات و توضیحات
6 دستورات CSS پیش فرض

تگ Nav در HTML

تگ nav تگی است که با استفاده از آن میتوان یک منوی ناوبری یا Navigation Menu که از تعدادی لینک تشکیل شده است را ایجاد نمود.

وقتی میگیم منوی ناوبری ، یعنی بطور کلی منویی که بتونه کاربر رو به بخش های مختلف یک سایت منتقل کنه، جوری که کاربر بتونه با یک نگاه متوجه شه چه نوع مطالبی با چه دسته بندی هایی در این سایت قرار داده شده است.

سوال : آیا لینک هایی که در قسمت منو قرار میگیرند با لینک هایی که در محتوای سایت یا صفحات سایت قرار میگیرد فرق دارند؟

پاسخ : بله و صددرصد که فرق دارند، لینک هایی که در قسمت منو قرار میگیرند میتونیم اینجوری بگیم که این لینک ها لینک های والد هستن، لینک هایی که میتونن یک دسته از مطالب سایت را مشخص نمایند.

ادامه پاسخ : برای مثال همین منوی اصلی فری لرن رو نگاه کنید، ما در این منو یک لینک داریم به اسم [آموزش HTML] که اگه روش کلیک کنید میتونید باز تعداد زیادی از لینک ها (که در واقع همون مطالب سایت هستن) رو مشاهده نمایید.

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

سوال : خب چرا نباید لینک هایی که باید تو محتوای سایت باشند رو درون منوی ناوبری گذاشت، مگه اشکالش چیه؟!

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

Free-Learn

مثال از تگ nav در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<nav>
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">Test1</a> |
  <a href="#">Test2</a>
</nav> 

</body>

<body>

<nav>

<a href="#">HTML</a> |

<a href="#">CSS</a> |

<a href="#">Test1</a> |

</nav>

</body>

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ nav با استفاده از CSS

<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>

<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 زیر نمایش میدهند.

nav {
  display: block;
}

nav {

display: block;

}