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

مدرس Jen Kramer

انتشار 2021/08/13

به‌روز‌رسانی 2024/01/31

مدت زمان 2h 16m

سطح مناسب همه

فایل تمرینی دارد

آموزش HTML and CSS: Creating Navigation Bars

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

Cascading Style Sheets (CSS) Front-end Development HTML User Interface Design

Introduction

Navigating the web with nav bars ()

Working with CodePen ()

1. Navigation Bar Basics

Using HTML to mark up a nav bar ()

Understanding the box model of a nav bar ()

Removing default list styling ()

Understanding link states and styling the text ()

2. Vertical Navigation Bars

Creating space in your nav bar ()

Enlarging the clickable area of the link ()

Indicating "you are here" in the navigation ()

Adding an icon to the link in an accessible way ()

Using background images in links for styling ()

Challenge: Style a vertical nav bar ()

Solution: Style a vertical nav bar ()

3. Horizontal Navigation Bars

Making navigation go horizontal with inline-block ()

Making navigation go horizontal with Flexbox ()

Centering and styling a horizontal navigation bar ()

Placing a logo in the center of a horizontal nav bar ()

Challenge: Style a horizontal nav bar ()

Solution: Style a horizontal nav bar ()

4. Responsive Navigation Bars

Add icons for a hamburger button ()

Adding hamburger button functionality with CSS ()

Styling the nav bar and hamburger button with media queries ()

Challenge: Make your nav bar responsive ()

Solution: Make your nav bar responsive ()

5. Nested Navigation Bars

Adding and styling a second level of vertical navigation ()

Adding a second layer of horizontal navigation ()

Creating dropdowns with CSS ()

Conclusion

Additional HTML and CSS courses ()

Ex_Files_HTML_and_CSS_Creating_Nav_Bars.zip (34 KB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.