آموزش گام به گام طراحی منوی واکنشگرا با HTML و CSS – پروژه عملی منوی جانبی
اگر به دنبال یادگیری آموزش HTML و آموزش CSS برای طراحی یک منوی واکنشگرا و حرفه‌ای هستید، این مقاله دقیقاً برای شماست! در این مقاله، سورس کد کامل منوی جانبی که با استفاده از تکنیک چک‌باکس پنهان ساخته شده است را بررسی می‌کنیم. همچنین می‌توانید آموزش ویدیویی جامع را از کانال یوتیوب ما مشاهده کنید.
مقدمه
سلام دوستان! من زمان الله ابراهیمی هستم و به کانال من خوش آمدید. امروز قصد دارم به شما آموزش دهم که چگونه یک منوی واکنشگرا زیبا و حرفه‌ای با استفاده از HTML و CSS بسازید – و نکته جالب این است که این منو بدون استفاده از جاوااسکریپت طراحی شده است! در این آموزش گام به گام، از تنظیم ساختار HTML گرفته تا استایل‌دهی دقیق با CSS، همه جزئیات رو به زبان ساده برای شما توضیح می‌دم. اگر به دنبال یادگیری تکنیک‌های نوین طراحی منو و بهبود تجربه کاربری سایت خود هستید، با من همراه بشید تا این پروژه عملی جذاب رو از صفر تا صد با هم پیاده‌سازی کنیم.
همیشه باور دارم که عشق و همراهی کلید موفقیت است؛ بیاید با هم یاد بگیریم و دنیای طراحی وب رو با طرح‌های زیبا و ساده رنگین کنیم!
مرحله ۱: ساختار کلی HTML منوی واکنشگرا
گام ۱: تنظیمات اولیه سند HTML
ابتدا یک سند HTML استاندارد ایجاد می‌کنیم. در این قسمت زبان صفحه را به فارسی تنظیم می‌کنیم تا متن‌ها راست‌چین شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>منوی واکنشگرا زیبا</title> <link rel="stylesheet" href="style.css" /> </head> <body> <!-- ادامه کد در ادامه قرار می‌گیرد --> </body> </html> |
توضیح:
در این مرحله، با استفاده از تگ‌های meta، اطمینان حاصل می‌کنیم که کاراکترهای فارسی به درستی نمایش داده شوند و صفحه واکنشگرا (Responsive) باشد.
مرحله ۲: ایجاد ساختار منو در HTML
گام ۲: اضافه کردن عناصر منو
در این بخش از کد، ما از یک چک‌باکس پنهان به عنوان کنترل باز/بسته شدن منو استفاده می‌کنیم. همچنین دو دکمه (برای باز کردن و بسته کردن منو) به کمک آیکون‌های SVG طراحی شده‌اند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<nav> <!-- چک‌باکس پنهان برای کنترل نمایش منو --> <input type="checkbox" id="sidebar-active" /> <!-- دکمه باز کردن منو --> <label for="sidebar-active" class="open-sidebar-button"> <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#5f6368"> <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/> </svg> </label> <!-- پوشش (Overlay) برای جلوگیری از کلیک روی بقیه صفحه هنگام باز بودن منو --> <label for="sidebar-active" id="overlay"></label> <!-- بخش لینک‌های منو --> <div class="link-contaiver"> <!-- دکمه بسته کردن منو --> <label for="sidebar-active" class="close-sidebar-button"> <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="#5f6368"> <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/> </svg> </label> <!-- لینک‌های منو --> <a href="#" class="home-link">خانه</a> <a href="#">درباره ما</a> <a href="#">محصول</a> <a href="#">وبلاگ</a> <a href="#">ورود</a> </div> </nav> |
توضیح:
- تگ
<input>با id=”sidebar-active” به عنوان سوئیچ باز/بسته شدن منو عمل می‌کند. - دو تگ
<label>به ترتیب دکمه باز و بسته کردن منو هستند. - لینک‌های منو در داخل یک div با کلاس “link-contaiver” قرار دارند.
مرحله ۳: استایل‌دهی منو با CSS
گام ۳: تعریف متغیرها و تنظیمات عمومی
ابتدا فونت‌ها و رنگ‌های اصلی را تعریف می‌کنیم تا در ادامه بتوانیم از آن‌ها استفاده کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@font-face { font-family: "iran-s"; src: url("fonts/IRANSansWeb.ttf") format("truetype"), url("fonts/IRANSansWeb.woff") format("woff"); } :root { --main-color: #0f1016; /* رنگ پس‌زمینه منو */ --text-color: #f0f0f0; /* رنگ متن و آیکون‌ها */ --hover-color: #f00; /* رنگ هنگام hover */ } * { margin: ; padding: ; box-sizing: border-box; overflow: hidden; font-family: "iran-s"; } |
توضیح:
- با استفاده از
@font-faceفونت “iran-s” را به پروژه اضافه می‌کنیم. - در بخش
:rootمتغیرهای رنگی تعریف شده‌اند که به ما امکان می‌دهند به سرعت رنگ‌ها را تغییر دهیم. - ریست کردن margin و padding باعث می‌شود استایل‌های پیش‌فرض مرورگر از بین بروند.
گام ۴: استایل ناوبری و لینک‌ها
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
nav { height: 60px; background-color: var(--main-color); display: flex; justify-content: flex-end; align-items: center; } .link-contaiver { height: 100%; width: 100%; display: flex; flex-direction: row-reverse; align-items: center; } nav a { height: 100%; padding: 20px; display: flex; align-items: center; text-decoration: none; color: var(--text-color); } nav a:hover { background-color: var(--hover-color); } nav .home-link { margin-left: auto; } nav svg { fill: var(--text-color); } |
توضیح:
- منوی ناوبری با استفاده از Flexbox چیده شده است.
- لینک‌ها دارای فاصله‌های مناسب و رنگ متنی تعریف‌شده هستند.
- روی لینک‌ها افکت hover اضافه شده تا جذابیت طراحی افزایش یابد.
- لینک خانه به صورت جداگانه تنظیم شده تا در سمت چپ (در راست‌چین) قرار گیرد.
گام ۵: تنظیمات مربوط به دکمه‌های باز/بسته منو و چک‌باکس
|
1 2 3 4 5 6 7 8 9 |
#sidebar-active { display: none; } .open-sidebar-button, .close-sidebar-button { cursor: pointer; display: none; } |
توضیح:
- چک‌باکس با id “sidebar-active” پنهان شده است.
- دکمه‌های باز و بسته کردن منو نیز به طور پیش‌فرض نمایش داده نمی‌شوند؛ اما در media query آن‌ها فعال می‌شوند.
گام ۶: تنظیمات واکنشگرا (Media Queries)
در صفحه‌های کوچک (عرض کمتر از ۴۵۰px)، منو به صورت ستونی و از سمت راست به نمایش درمی‌آید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
@media (max-width: 450px) { .link-contaiver { flex-direction: column; align-items: flex-start; position: absolute; top: ; right: -100%; transition: 1s ease-out; z-index: 10; width: 300px; background-color: var(--main-color); box-shadow: -5px 5px rgba(255, , , 0.25); direction: rtl; } nav a { box-sizing: border-box; height: auto; width: 100%; padding: 20px 30px; justify-content: flex-start; } .open-sidebar-button, .close-sidebar-button { padding: 20px; display: block; } /* وقتی چک‌باکس فعال شود، منو نمایش داده می‌شود */ #sidebar-active:checked ~ .link-contaiver { right: ; } /* پوشش (Overlay) برای منو در حالت باز */ #sidebar-active:checked ~ #overlay { height: 100%; width: 100%; position: fixed; top: ; right: ; z-index: 9; } } |
توضیح:
- در media query، ترتیب چیدمان منو تغییر کرده و منو از سمت راست خارج شده تا زمانی که چک‌باکس فعال شود، نمایش داده شود.
- دکمه‌های باز و بسته منو فعال شده و پوشش (Overlay) نیز نمایش داده می‌شود تا کاربر متوجه شود که تمرکز بر منوست.
نتیجه‌گیری
این آموزش گام به گام به شما نشان می‌دهد چگونه یک منوی واکنشگرا و زیبا بدون استفاده از جاوااسکریپت بسازید. در این پروژه عملی، از تکنیک‌های مدرن HTML و CSS مانند چک‌باکس پنهان، Flexbox و Media Queries استفاده شده است تا تجربه کاربری بهتری در دستگاه‌های مختلف ارائه شود.
اگر به دنبال یادگیری تکنیک‌های نوین #آموزش_HTML و #آموزش_CSS هستید، این پروژه نمونه عالی برای شروع است. برای دریافت سورس کد کامل به همراه تصاویر و فونت‌های مورد نیاز، می‌توانید به این مقاله مراجعه کنید.
همچنین می‌توانید آموزش ویدیویی جامع را از کانال یوتیوب ما مشاهده کنید تا همراه با من، قدم به قدم این پروژه عملی را بسازید.
با همراهی این آموزش، شما یک قدم بزرگ به سمت تسلط بر مباحث طراحی منو و بهبود تجربه کاربری برداشته‌اید. موفق باشید و از یادگیری لذت ببرید!
هیچ دیدگاهی برای این محصول نوشته نشده است.