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

طراحی منو در html و css- راهکاری ساده و عالی برای دسته‌بندی محتوا

سلام به همه دوستان عزیز سایت سبزلرن. در مقاله طراحی منو در html و css با آموزش طراحی منو سایت در خدمت شما هستیم. طراحی منو سایت باعث نظم دادن به محتوای شما میشه و می تونید با ایجاد منو در html  و Css تجربه کاربری سایت را بهبود بدین. در اغلب سایت ها منو برای این استفاده میشه که شما رو به قسمت‌های مختلف اون سایت، راهنمایی کنه. در واقع منو سایت شامل قسمت‌های مختلف سایت هست. به این قسمت اصطلاحا NavBar و یا Navigation Menu Bar میگن.

 

همونطور که گفتیم طراحی منو سایت با css و html میتونه بصورت عمودی یا افقی باشه. اینکه ساخت navbar در html به چه شکلی باشه کاملا سلیقه ایه. یعنی بستگی به این داره کسی که داره  UI/UX رو طراحی میکنه به چه صورتی بخواد طراحی منو وب سایت چجوری باشه. ما تو این قسمت میخوایم، در کنار بررسی مفاهیمT ساخت منو در html بصورت عمودی منویی رو طراحی کنیم.

 

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

 

آموزش طراحی منو در Css و html: منوی عمودی

 

 

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

 

برای طراحی منو در Css و html به صورت عمودی به شکل بالا دقت کنید. ابتدا سایت ما به این شکل هست. یه قسمتی به رنگ آبی هست که کاربر موقعی که کلیک کنه منو از سمت چپ براش باز بشه. یعنی زمانی که کلیک میکنه به این شکل باز میشه:

 

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

 

 

بریم سراغ آموزش ساخت منو با html و Css . در این قسمت navigation ما به این صورت شده:

 

  • کد منو در html

کد HTML منو

 

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

 

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

روشی که درست تره اینه که با جاوااسکریپت ما تابع onclick رو بنویسیم. ولی چون اینجا دیگ من نمیخواستم از جاوااسکریپت استفاده کنم و هدفمون ساخت منو با html هست، پس میریم سراغ راه های ایجاد منو در html. تو این کد منو در html ما یه input از نوع checkbox ایجاد میکنیم و برای اون دکمه اومدیم از یک آیکون و یک تگ label استفاده کردیم.

 

بعد اگه دقت کنید با ویژگی for توی تگ label گفتیم که برای آیدی check که آیدی تگ input هست باشه. یعنی اگه روی این label کلیک شد checkbox رو فعال کنه. توی قسمت بعدی برای طراحی منو با Css، توی css بهش میگیم که اگه این checkbox تیک خورد (یعنی اگه کاربر روی اون label کلیک کرد) بیاد یه کار دیگ ای بکنه.

 

بعد از این کار اومدیم داخل تگ label از یه آیکون استفاده کردیم.، که البته این آیکون رو با تگ script بالای این کد منو در html همونطور که میبینید اضافه شده. خب بعدش اومدیم از تگ nav استفاده کردیم برای طراحی بخش منو که باز و بسته میشه. داخل این تگ از ul برای چیدن یک لیست استفاده کردیم. سپس با تگ li که داخل هر تگ از تگ a برای لینک دهی استفاده کردیم.

 

این شد از طراحی منو در html ببنیید دوستان برای هر کدوم از عکس‌های اول مقاله که نوعی منو هستند اصول کار به همین شکل هست.همونطور که می بینید ایجاد منو در html اصلا کار سختی نیست و فقط یکم مهارت و خلاقیت نیاز داره. خب بریم سراغ اصل کار یا همون قسمت ساخت منو سایت با css.

 

  • کد CSS برای ساخت منو

خب بعد از اینکه کد منو در html را نوشتیم باید بریم سراغ ساخت منو سایت با Css. ابتدا برای طراحی منو با css میریم سراغ یک سری کار های اولیه: این کارهای اولیه مثل اینکه margin و padding رو که بعضی تگ‌ها بصورت دیفالت دارن صفر میکنیم. بعدش box-sizing رو برای اینکه اندازه‌ها دقیقا به همون شکل که میگیم دربیاد به حالت border-box میزاریم

 

برای اینکه اون علامت لیست ul رو برداریم list-style رو بصورت none میزاریم. بعدش با text-decoration به حالت none اون حالت لینکی و دیفالت تگ‌های a رو برمیداریم. طراحی منو سایت با css به این صورت شد:

 

 

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

 

آموزش ساخت منو با html و Css به صورت کامل تر

 

  • گام اول: استایل دهی و طراحی منو با css به کمک تگ nav

بعد از ساخت navbar در html، برای تگ nav که کل منو رو شامل میشه میخوایم با طراحی منو با css بهش استایل بدیم. خب ببینید در حالت اول که سایت بالا میاد این منو در خارج از صفحه اس. یعنی اولش حضور نداره بعدش که کاربر روی اون label کلیک میکنه منو ظاهر میشه. برای اینکار میایم margin-left رو برابر -100% قرار میدیم.

 

منفی میزاریم که بره بیرون از صفحه. بعدش برای اینکه ارتفاع منو کل صفحه رو شامل بشه میایم height رو برابر 100vh میزاریم. بعدش میریم سراغ عرض منو. برای عرض میگیم عرض منو بشه یک پنجم صفحه. البته بصورت max-width مشخص میکنیم که بصورت 20vw باشه. بعدش رنگ پس زمینه رو با background-color و رنگ نوشته‌های داخلش رو با color مشخص میکنیم.

 

بعد هم برای اینکه بهش بگیم که بسته شدن و باز شدنش با تاخیر و بصورت یک انیمیشن انجام بشه از transition استفاده میکنیم که بصورت 0.5 ثانیه مناسب هست. در نهایت هم میگیم نوشته ها وسط باشن پس از text-align بصورت center استفاده میکنیم.ساخت منو سایت با css ما به این صورت است:

 

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

 

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

 

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

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

 

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

 

 

حالا برای اون لیست داخل تگ nav استایل مشخص میکنیم. میریم سراغ تگ‌های li. خب اول برای اینکه مرتب تر بشن یه padding میزاریم. بعدش هم یه مقدار فونتشون رو بزرگتر میزاریم. کد ما به این شکل شد:

 

 

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

 

 

نتیجه ساخت منو سایت با css تا الان به این شکل شده:

 

 

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

تا اینجای کار قسمت اول ساخت منو سایت با css را دیدیم. حالا بریم سراغ قسمت دوم

 

  • گام دوم: دکمه و label برای منو

بعد اینکه کار ساخت منو با html و Css را انجام دادیم، باید بریم سراغ دکمه ها و لیبل ها. خب اول میایم برای اون تگ label که کلاس checkbtn داشت استایل میدیم. اول با background-color یه رنگ خوب میدیم. همچنین برای اینکه اون آیکون هم رنگش سفید بشه و هم اینکه بیاد وسطچین بشه از color و text-align استفاده میکنیم. کد ما اینجوری شد:

 

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

 

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

 

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

 

 

همونطور که میبینید اندازش درست نشده. حالا برای اینکه این فاصله رو درست کنیم کافیه به اون آیکون یه padding برابر 20px بدیم. حالا اگه دقت کنیم مشاهده میشه که اون آیکون بخاطر padding ایکه دادیم بهش از اون label میزنه بیرون. برای اینکه رنگ اون مقدار هم عوض کنیم یه background-color میدیم به همون رنگ پس زمینه label.

 

بعدش هم از عرض این آیکون رو به اندازه همون عرض منو میزاریم یعنی 20vw. کد ما تا الان به این شکل شد:

 

 

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

 

 

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

 

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

 

  • گام سوم: حالت انیمیشن منو

این مرحله آخرین مرحله از ساخت منو در html و Css هست. در این قسمت میگیم که هرموقع اون checkbox تیک خورد یعنی به حالت checked در اومد بیا تگ nav رو این استایل هارو بهش بده. بیا اول margin-left رو که اولش منفی گذاشته بودیم صفر کن (برای این قسمت باید حواستون باشه که از الان دیگ اون margin-left که برای تگ nav منفی گذاشته بودیم رو فعال کنیم).

 

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

 

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

 

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

 

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

 

الان صفحه که باز میشه منو نیست و اگه روی دکمه منو کلیک کنید منو با انیمیشن باز میشه و اگه دوباره کلیک کنید منو بازم با انیمیشن بسته میشه. در انتها یه نکته بگیم. هنگام ساخت منو در html و Css، اگه transition رو روی حالت اولیه بنویسید زمانی انیمشین دار میشه که از حالت ثانویه به حالت اولیه برگرده و اگه روی حالت ثانویه بنویسین برعکس.

 

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

[dlbox title=”دانلود پروژه” link=”https://dl.sabzlearn.ir/sc/navigationMenuBar.rar” type=”navigationMenuBar.rar” size=”1KB” pass=”ندارد”]

کار تمومه.

سخن آخر

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

 

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

One thought on “طراحی منو در html و css- راهکاری ساده و عالی برای دسته‌بندی محتوا

دیدگاهتان را بنویسید