برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

طراحی منو در html و css

طراحی منو سایت و Navigation Menu Bar به آسانی!

سلام به همه دوستان عزیز. در مقاله طراحی منو در html و css با آموزش ساخت یک منو بار در طراحی وب در خدمت شما هستیم.

در اغلب سایت ها یک منویی هست برای اینکه شمارو به قسمت‌های مختلف اون سایت، راهنمایی کنه و در واقع منویی شامل قسمت‌های مختلف سایت هست.

به این قسمت اصطلاحا NavBar و یا Navigation Menu Bar میگن. برای مثال چند UI زیبا از منو هارو در شکل پایین میبینید:

 

طراحی منو با رنگ آبی

 

طراحی منو درhtml و css به رنگ بنفش

 

طراحی این منو در html و css میتونه بصورت عمودی یا افقی باشه.

بستگی به این داره کسی که داره  UI/UX رو طراحی میکنه به چه صورتی بخواد منوی سایت رو طراحی کنه.

ما تو این قسمت میخوایم، بصورت عمودی منویی رو طراحی کنیم. یه شکل خیلی ساده منو رو طراحی میکنیم و اساس طراحی رو خدمتتون آموزش میدیم.

آموزش طراحی منو به صورت عمودی

 

طراحی منو در html و css

ابتدا سایت ما به این شکل هست. یه قسمتی به رنگ آبی هست که کاربر موقعی که

کلیک کنه منو از سمت چپ براش باز بشه. یعنی زمانی که کلیک میکنه به این شکل باز میشه:

مرحله اول ساخت منو در html

 

بریم سراغ آموزش. کد html برای طراحی منو یا navigation ما به این صورت شده:

 

  • کد HTML

کد HTML منو

 

خب بریم یه توضیح بدیم.

ببینید ما چندتا راه داریم برای اینکه بخوایم حالتی در منو هامون ایجاد کنیم، که زمانی که کاربر بخواد کلیک کنه روی اون دکمه منو باز بشه.

طراحی حالت کلی منو

یکی که خیلی مرسومه و درست تره اینه که با جاوااسکریپت ما تابع onclick رو بنویسیم. ولی چون اینجا دیگ من نمیخواستم

از جاوااسکریپت استفاده کنم اومدم از این حالت استفاده کردم. تو این حالت ما یه input از

نوع checkbox ایجاد میکنیم و برای اون دکمه اومدیم از یک آیکون و یک تگ label استفاده

کردیم.

بعد اگه دقت کنید با ویژگی for توی تگ label گفتیم که برای آیدی check که آیدی

تگ input هست باشه.

یعنی اگه روی این label کلیک شد checkbox رو فعال کنه.

بعدش توی css بهش میگیم که اگه این checkbox تیک خورد (یعنی اگه کاربر روی اون label کلیک کرد) بیاد یه کار دیگ ای بکنه.

بعد از این کار اومدیم داخل تگ label از یه آیکون استفاده کردیم.، که البته این آیکون رو با تگ script بالای این فایل html همونطور که میبینید اضافه شده.

خب بعدش اومدیم از تگ nav استفاده کردیم برای طراحی بخش منو که باز و بسته میشه.

داخل این تگ از ul برای چیدن یک لیست استفاده کردیم.

سپس با تگ li که داخل هر تگ از تگ a برای لینک دهی استفاده کردیم.

این شد از طراحی منو در html ببنیید دوستان برای هر کدوم از عکس‌های اول مقاله که نوعی منو

هستند اصول کار به همین شکل هست.

 

 

خب بریم سراغ اصل کار یا همون css.

 

  • کد CSS

خب ابتدا برای طراحی یک منو جذاب در css بریم سراغ یک سری کار های اولیه:

این کارهای اولیه مثل اینکه margin و padding رو که بعضی تگ‌ها بصورت دیفالت دارن صفر میکنیم.

بعدش box-sizing رو برای اینکه اندازه‌ها دقیقا به همون شکل که میگیم دربیاد به حالت border-box میزاریم

برای اینکه اون علامت لیست ul رو برداریم list-style رو بصورت none میزاریم.

بعدش با text-decoration به حالت none اون حالت لینکی و دیفالت تگ‌های a رو برمیداریم.

طراحی منو در css به این صورت شد:

حواسمون هست که با * این کدهارو به کل صفحه نسبت دادیم. حالا بریم سراغ قسمت اول.

 

آموزش طراحی منو به صورت کامل تر

  • قسمت اول) استایل دهی به تگ nav یا منو

برای تگ nav که کل منو رو شامل میشه میخوایم استایل بدیم.

خب ببینید در حالت اول که سایت بالا میاد این منو در خارج از صفحس.

یعنی اولش حضور نداره بعدش که کاربر روی اون label کلیک میکنه منو ظاهر میشه.

برای اینکار میایم margin-left رو برابر -۱۰۰% قرار میدیم.

منفی میزاریم که بره بیرون از صفحه.

بعدش برای اینکه ارتفاع منو کل صفحه رو شامل بشه

میایم height رو برابر ۱۰۰vh میزاریم.

بعدش میریم سراغ عرض منو. برای عرض میگیم عرض منو بشه یک پنجم صفحه. البته بصورت max-width مشخص میکنیم که بصورت ۲۰vw باشه.

بعدش رنگ پس زمینه رو با background-color و رنگ نوشته‌های داخلش رو با color مشخص میکنیم.

بعدش هم برای اینکه بهش بگیم که بسته شدن و باز شدنش با تاخیر و بصورت یک انیمیشن انجام بشه از transition استفاده میکنیم که بصورت ۰٫۵ ثانیه مناسب هست.

در نهایت هم میگیم نوشته ها وسط باشن پس از text-align بصورت center استفاده میکنیم.

استایل دهی در css برای منو ما به این صورت است:

استایل دهی در css برای منو

صفحه ما تا الان به این شکل شد.

استایل دهی به تگ nav یا منو

البته اگه margin منفی تگ nav رو برداریم منو معلوم میشه یعنی به این صورت:

استایل در حالت مارجین منفی

 

حالا برای اون لیست داخل تگ nav استایل مشخص میکنیم. میریم سراغ تگ‌های li.

خب اول برای اینکه مرتب تر بشن یه padding میزاریم.

بعدش هم یه مقدار فونتشون رو بزرگتر میزاریم. کد ما به این شکل شد:

 

بعدش میریم سراغ نوشته‌ها یعنی تگ‌های a. برای اونها فقط رنگشون رو سفید میکنیم.

 

 

شکل صفحه ما تا الان به این شکل شده:

 

 

در اخر هم میتونیم برای زیبایی بیشتر ویژگی hover استفاده کنیم که مثلا اگه کاربر موس رو اورد روی هر کدوم از این نوشته‌ها و گزینه‌ها رنگش تغییر کنه.

 

  • قسمت دوم) دکمه و label برای منو

خب اول میایم برای اون تگ label که کلاس checkbtn داشت استایل میدیم.

اول با background-color یه رنگ خوب میدیم.

همچنین برای اینکه اون آیکون هم رنگش سفید بشه و هم اینکه بیاد وسطچین بشه از color و text-align استفاده میکنیم.

کد ما اینجوری شد:

کد دکمه و label برای منو

صفحه ما تا الان اینجوری شد:

خروجی دکمه و label برای منو

 

همونطور که میبینید اندازش درست نشده. حالا برای اینکه این فاصله رو درست کنیم

کافیه به اون آیکون یه padding برابر ۲۰px بدیم. حالا اگه دقت کنیم مشاهده میشه

که اون آیکون بخاطر padding ایکه دادیم بهش از اون label میزنه بیرون.

برای اینکه رنگ اون مقدار هم عوض کنیم یه background-color میدیم به همون رنگ پس زمینه label.

بعدش هم از عرض این آیکون رو به اندازه همون عرض منو میزاریم یعنی ۲۰vw.

کد ما تا الان به این شکل شد:

 

 

صفحه هم به این شکل شد:

 

 

حالا چیزی که مونده اینه که اون دکمه checkbox غیب بشه و حضور نداشته باشه البته فقط ظاهری چون کارکرد خودشو داره.

ولی اولش میایم این کارو میکنیم که هر موقع کاربر روی اون دکمه منو کلیک کرد منو باز بشه و هر موقع دوباره کلیک کرد منو بسته بشه.

 

 

دقت کنیم که الان اگه روش کلیک کنه اون checkbox تیک میخوره و دوباره کلیک کنه checkbox تیکش برداشته میشه. پس بریم سراغش:

  • قسمت سوم) حالت انیمیشن منو

میگیم که هرموقع اون checkbox تیک خورد یعنی به حالت checked در اومد بیا تگ nav رو این استایل هارو بهش بده.

بیا اول margin-left رو که اولش منفی گذاشته بودیم صفر کن (برای این قسمت باید حواستون باشه که از الان دیگ اون

margin-left که برای تگ nav منفی گذاشته بودیم رو فعال کنیم).

این کار رو با یه تاخیر نیم ثانیه‌ای انجام بده که انیمیشن داشته باشه.

کد:

 

کد حالت انیمیشن منو

 

الان اگه چک کنید اولش منو نیست بعد اینکه روی اون منو کلیک کنید منو با حالت انیمیشن

باز میشه. حالا بیایم اون checkbox رو مخفی کنیم. برای اینکار میایم حالت display رو none میزاریم. کد:

کد حالت انیمیشن منو بخش دوم

 

الان صفحه که باز میشه منو نیست و اگه روی دکمه منو کلیک کنید منو با انیمیشن باز میشه و اگه دوباره کلیک کنید منو بازم با انیمیشن بسته میشه.

در انتها یه نکته بگیم. اگه transition رو روی حالت اولیه بنویسید زمانی انیمشین دار میشه

که از حالت ثانویه به حالت اولیه برگرده و اگه روی حالت ثانویه بنویسین برعکس.

ما اینجا توی هر دو قسمت نوشتیم برای اینکه برای دو حالت انیمیشن داشته باشه.

دانلود پروژه
نوع فایل : navigationMenuBar.rar
حجم : 1KB
پسورد : ندارد
دریافت

کار تمومه.

طراحی منو در html و css به پایان رسید!

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *