HTML و CSS: ایجاد المان های ناوبری

حتی اگر محصول یا سرویس شما واقعا اصلی باشد، برنامه یا سایتی که برای آن ایجاد می کنید، می خواهید عناصر را با هر برنامه یا سایت دیگری در این سیاره به اشتراک بگذارید. به عنوان مثال، نوار ناوبری فروتن، که کاربران شما نیاز به پیدا کردن راه خود را از طریق سایت خود را. در این دوره، مربی جین کرامر نشان می دهد که چگونه برای ایجاد ناوگان های زیبا و قابل دسترس با استفاده از تکنیک های HTML و CSS که در هر زمینه وب کار می کنند، ایجاد کنید. جین با جزئیات نشانه گذاری مناسب برای نوار NAV و مدل جعبه مرتبط با عناصر آن شروع می شود. پس از آن او می رود چگونه به سبک هر دو نوار ناوبری عمودی و افقی - از جمله نحوه قرار دادن لوگو درست در وسط یک نوار ناوبری افقی. در نهایت، جین چند ترفندهای پیشرفته را به اشتراک می گذارد، از جمله نحوه ایجاد dropdowns و طرح بندی های تلفن همراه با دکمه های همبرگر با CSS، بدون جاوا اسکریپت مورد نیاز است.

عنوان اصلی : HTML and CSS: Creating Navigation Bars

سرفصل های دوره :

مقدمه:
مرور وب با ناوگان
کار با کدپن
1. مبانی نوار ناوبری:
استفاده از HTML برای نشان دادن یک نوار ناوبری
درک مدل جعبه یک نوار ناوبری
حذف یک ظاهر طراحی پیش فرض
درک حالت های لینک و یک ظاهر طراحی شده متن
2. نوار ناوبری عمودی:
ایجاد فضای در نوار ناوبری شما
بزرگنمایی منطقه قابل کلیک از لینک
نشان می دهد که در آن شما در ناوبری هستید
اضافه کردن آیکون به لینک در یک راه قابل دسترسی
استفاده از تصاویر پس زمینه در لینک ها برای یک ظاهر طراحی شده
چالش: سبک یک نوار ناوبری عمودی
راه حل: سبک یک نوار ناوبری عمودی
3. نوار ناوبری افقی:
ساخت ناوبری افقی با بلوک درون خطی
ساخت ناوبری افقی با Flexbox
مرکز و طراحی یک نوار ناوبری افقی
قرار دادن لوگو در مرکز یک نوار ناوبری افقی
چالش: سبک افقی افقی
راه حل: سبک افقی ناوبری
4. نوار ناوبری پاسخگو:
اضافه کردن آیکون برای یک دکمه همبرگر
اضافه کردن عملکرد دکمه همبرگر با CSS
یکپارچه دکمه ناوبری و همبرگر با پرس و جوهای رسانه ای
چالش: Navbar خود را پاسخگو
راه حل: Navbar خود را پاسخگو
5. نوارهای ناوبری توزیع شده:
اضافه کردن و یکپارچه سطح دوم ناوبری عمودی
اضافه کردن یک لایه دوم از ناوبری افقی
ایجاد downdowns با CSS
نتیجه گیری:
دوره های اضافی HTML و CSS