آموزش HTML و CSS: ایجاد نوارهای ناوبری

معرفی Introduction

• حرکت در وب با نوارهای ناوبری Navigating the web with navbars

• کار با CodePen Working with CodePen

1. اصول نوار ناوبری 1. Navigation Bar Basics

• استفاده از HTML برای علامت گذاری نوار ناوبری Using HTML to mark up a navbar

• درک مدل جعبه یک نوار navbar Understanding the box model of a navbar

• حذف حالت دهی فهرست پیش فرض Removing default list styling

• درک حالات پیوند و حالت دادن به متن Understanding link states and styling the text

2. میله های ناوبری عمودی 2. Vertical Navigation Bars

• ایجاد فضا در نوار ناوبری خود Creating space in your navbar

• بزرگ کردن ناحیه قابل کلیک روی پیوند Enlarging the clickable area of the link

• نشان می دهد که در ناوبری کجا هستید Indicating where you are in the navigation

• افزودن یک نماد به پیوند به روشی قابل دسترسی Adding an icon to the link in an accessible way

• استفاده از تصاویر پس زمینه در پیوندها برای حالت دادن Using background images in links for styling

• چالش: یک نوار ناوبری عمودی ایجاد کنید Challenge: Style a vertical navbar

• راه حل: برای ایجاد یک نوار ناوبری عمودی Solution: Style a vertical navbar

3. میله های ناوبری افقی 3. Horizontal Navigation Bars

• حرکت ناوبری به صورت افقی با بلوک خطی Making navigation go horizontal with inline-block

• حرکت افقی با Flexbox Making navigation go horizontal with Flexbox

• مرکز و طراحی یک نوار ناوبری افقی Centering and styling a horizontal navigation bar

• قرار دادن لوگو در مرکز نوار افقی Placing a logo in the center of a horizontal navbar

• چالش: یک نوار ناوبری افقی ایجاد کنید Challenge: Style a horizontal navbar

• راه حل: برای ایجاد یک نوار ناوبری افقی Solution: Style a horizontal navbar

4. میله های ناوبری پاسخگو 4. Responsive Navigation Bars

• نمادهایی را برای دکمه همبرگر اضافه کنید Add icons for a hamburger button

• افزودن قابلیت دکمه همبرگر با CSS Adding hamburger button functionality with CSS

• یکپارچه سازی دکمه navbar و همبرگر با نمایش داده های رسانه ای Styling the navbar and hamburger button with media queries

• چالش: Navbar خود را پاسخگو کنید Challenge: Make your navbar responsive

• راه حل: نوار خود را پاسخگو کنید Solution: Make your navbar responsive

5. میله های ناوبری تو در تو 5. Nested Navigation Bars

• افزودن و یک ظاهر طراحی سطح دوم ناوبری عمودی Adding and styling a second level of vertical navigation

• افزودن لایه دوم ناوبری افقی Adding a second layer of horizontal navigation

• ایجاد پنجره بازشو با CSS Creating dropdowns with CSS

نتیجه Conclusion

• دوره های اضافی HTML و CSS Additional HTML and CSS courses