آموزش تگ nav در HTML

آموزش تگ nav در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ nav
در HTML به صورت کامل آشنا بشید.
تگ nav در HTML
تگ nav
که در HTML از آن استفاده میکنیم در واقع از کلمه Navigation بر گرفته شده است، با استفاده از این تگ میتوانیم یک منوی ناوبری یا Navigation Menu که از تعداد زیادی لینک تشکیل شده است را ایجاد نماییم.
زمانی که حرف از منوی ناوبری میشود منظورمان همان منوی اصلی سایت است که در قسمت بالایی تمام سایت هایی که در گوگل وجود دارند، قرار میگیرد و توسط آن میتوانیم به انواع بخش های سایت مراجعه کنیم. در نتیجه کاربرد تگ nav این است که بطور کلی نوار های بالایی یا… را با آن ایجاد میکنند.
دو مثال برای تگ nav در HTML
در ادامه دوره آموزشی HTML CSS پروژه محور به چند نمونه از مثال های تگ nav
میپردازیم که با این تگ بیشتر و بهتر آشنا شوید و در آینده بتوانیم به سهولت از آن استفاده کنید.
مثال اول : استفاده از تگ nav برای ایجاد منوی بالای صفحه بدون استفاده از کد CSS یا همان استایل.
<body> <nav> <a href="#">خانه</a> <a href="#">فروشگاه</a> <a href="#">درباره ما</a> <a href="#">تماس با ما</a> </nav> </body>
دومین مثال : استفاده از کد های CSS و استایل دهی به تگ nav
nav{ background-color:#2D2E2F; padding:8px; } nav a{ color:#fff; padding:12px; text-decoration:none; transition:0.3s; } nav a:hover{ background-color:#de410f; }
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ nav
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ nav
در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
پشتیبانی تگ nav از صفات و رویدادهای عمومی
تگ nav
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- علاوه بر این تگی که باهم آن را بررسی کردیم میتوانید از تگ ul هم استفاده کنید و منو های بصورت عمودی یا افقی را طراحی کنیم.
دستورات CSS پیش فرض
در این بخش به بررسی کد های CSS که میتوانیم با استفاده از آنها و بدون ویرایش خاصی برای تگ nav خود استفاده کنیم که به صورت پیش فرض قرار گرفته اند.
nav { display: block; }
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید