این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ nav در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ nav در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ nav که از کلمه Navigation گرفته شده، تگی است که با استفاده از آن میتوان یک منوی ناوبری یا Navigation Menu که از تعدادی لینک تشکیل شده است را ایجاد نمود.
وقتی میگیم منوی ناوبری ، یعنی بطور کلی همون منوی اصلی سایت، منویی که در تمامی سایت های موجود در اینترنت دارید میبینید، پس بطور کلی تگ nav تگی است که با استفاده از آن میتوان قسمت منوی سایت رو ایجاد کرد.
Free-Learn
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ nav برای ایجاد منو ( بدون استایل )
|
1 2 3 4 5 6 7 8 9 10 |
<body> <nav> <a href="#">خانه</a> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JS</a> </nav> </body> |
مثال شماره ۲ : استایل دادن به تگ nav با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> nav{ background-color:#2D2E2F; padding:8px; } nav a{ color:#fff; padding:12px; text-decoration:none; transition:0.3s; } nav a:hover{ background-color:#de410f; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ nav در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ nav از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- ما با استفاده از تگ ul نیز میتوانیم منوی هم بصورت افقی و هم عمودی ایجاد نماییم. ( مثال برای منوی افقی و مثال برای منوی عمودی )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ nav را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
nav { display: block; } |
