ساخت منو حرفه ای با css

به منظور ساخت منو حرفه‌ای با استفاده از CSS، اولین گام برای هر طراح وب، آشنایی با تکنیک‌های پیشرفته CSS است که امکان ایجاد منوهای زیبا و کاربرپسند را فراهم می‌آورد. این آموزش شامل استفاده از انواع ترفندهای CSS از جمله استفاده از Flexbox و Grid برای تنظیم طرح بندی منو، استفاده از ترکیبات مختلف رنگی و فونت‌ها برای جلب توجه کاربران، و استفاده از انیمیشن‌ها و افکت‌های hover برای افزایش تجربه کاربری می‌باشد.

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

آموزش HTML CSS در مجتمع فنی تهران

مجتمع فنی تهران به عنوان یکی از پیشتازان آموزش مهارت‌های برنامه‌نویسی و طراحی وب، دوره‌های آموزش HTML و CSS را برگزار می‌کند. این دوره‌ها به شما کمک می‌کنند تا با اصول و مبانی این دو زبان برنامه‌نویسی آشنا شوید و مهارت‌های لازم برای ایجاد منوهای حرفه‌ای و سایر عناصر وب‌سایت را کسب کنید. استفاده از ابزارها و تکنیک‌های پیشرفته در این دوره‌ها، به شما امکان می‌دهد تا با استانداردهای جدیدتر و نیازهای بازار کار آشنا شوید و به طراحی وب‌سایت‌هایی با ارزش و کیفیت بالا بپردازید.

معرفی تگ های HTML در ساخت منو

مهمترین تگ هایی که برای ساخت منو در HTML  با اونها کار داریم :

تگ

اصلی ترین تگ برای ساخت منو در HTML هست چون میتونیم به وسیله اون یک لیست به عنوان منو بسازیم و با تگ های  بعدی، گزینه ها، چیدمان، استایل و زیرمنوهای اون رو تکمیل کنیم. (منو اساسا همون لیسته که افقی عمودی میشه! )

تگ

• در لیستی که قصد داریم ایجاد کنیم هر آیتم (هر گزینه منو) باید به صورت مجزا در این تگ قرار بگیره. در واقع به تعداد گزینه های یک منو از این تگ استفاده خواهید داشت.

تگ

تا قبل از ورود این تگ به بازی، گزینه ها متن خالی هستن و لینک محسوب نمیشن چون هنوز آدرس مشخصی برای اونها تعریف نشده. کار این تگ اختصاص آدرس (URL) به هر کدوم از آیتم هاست. (لینک موقعی لینکه که بشه روش کلیک کرد و مارو به صفحه دیگه ای منتقل کنه )

تگ

این تگ برای اولین بار در HTML5 اضافه شد و همونطور که در بخش قبلی اشاره شد، برای ایجاد منوهای ناوبری که در همه صفحات ثابت هستن به کار میره.

تگ

با استفاده از این تگ می تونید فضای مورد استفاده در یک صفحه وب  تقسیم بندی کرده و به هر بخش سایت، فضای مناسب رو اختصاص بدید. (مسئول زمین های سایته ایشون )

ساخت منو با HTML و CSS به زبان ساده

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

1 – تعریف لیست (منو)

اولین قدم ایجاد منو در HTML ، تعریف یک لیسته! دلیلشم واضحه چون منو ذاتا یه لیسته و همیشه بیشتر از یک گزینه داره. بنابراین با استفاده از تگ

2 – تعریف آیتم های منو

 

قصد دارید نوار منوی شما چندتا گزینه داشته باشه؟ در داخل تگ

 که در مرحله قبل تعریف کردیم، به ازای هر گزینه یک تگ

•   ایجاد کنید. مثلا اگر بخوایم یک منو با 4 گزینه  “خانه” ، “دسته‌بندی‌ها” ، “درباره‌ما” و “ارتباط با ما ” بسازیم، باید 4 بار از این تگ استفاده کنیم. به این شکل :

 

 

→ 

• خانه

 

→  

• دسته بندی ها

 

→ 

• درباره ما

 

→   

• ارتباط با ما

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

3 – تبدیل آیتم ها به لینک با آدرس دهی

 

حالا یه منو داریم با 4 تا گزینه.  اما اینا فقط متن خالی هستن و لینک محسوب نمیشن چون هنوز به هیچ آدرس اینترنتی (سایت یا صفحه یا فایل) وصل نشدن که بشه روی اونها کلیک کرد. اینجا نوبت استفاده از تگ

 

ترجمه کدها :

 

یادآوری : هرجا با آیتم کار دارید تگ

• رو باز کنید

 

 

• اول به سیستم میگی class=”list-item” .

 

 

” یعنی برای آیتم های لیست (گزینه های منو) یک کلاس ایجاد کن تا بعدا بتونم صداش کنم و هر تغییری خواستم به صورت یکجا رو همشون اعمال کنم! ”

 

 

” یعنی این آدرس رو فعلا داشته باش تا بهت بگم (میتونه “www.google.com” باشه مثلا ) ”

 

 

• بعد بلافاصله میگی : خانهclass=”list-link”>

 

 

” یعنی به گزینه “خانه”کلاس لینک بده (به لینک تبدیلش کن و به آدرسی که بهت گفتم وصلش کن) ”

 

بعد هم تگ

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

(حالا گزینه ها یه لینک واقعی شدن که وقتی روشون کلیک می کنیم یک صفحه خاص باز میشه. یعنی همون چیزی که ما به خاطر اون منو رو میسازیم)

 

4 – ایجاد زیرمنو

 

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

 

 

ترجمه کدها :

 

 

• زیر هر گزینه (آیتمی) از منوی اصلی بخواید زیرمنو ایجاد کنید، باید همون جایی که کدهای اون هستن کدهای جدید رو بنویسید تا سیستم بدونه دستورات رو برای کدوم گزینه اجرا کنه (اینجا ما گزینه “دسته بندی ها” رو انتخاب کردیم برای تست)

 

• ما چی نیاز داریم؟ زیرمنو ، آیا زیرمنو خودش لیست محسوب نمیشه ؟ چرا اون هم یه لیسته فرقی نداره . پس دوباره باید از متخصص لیست سازی یعنی تگ

 استفاده کنید و این بار موقع تعریف، به جای class=”list” از عبارت class=”sublist”  به معنی زیرمنو استفاده می کنیم.

 

• حالا همون کاری که برای لینکی شدن گزینه های منوی اصلی انجام دادیم برای زیرمنو هم انجام میدیم که با فلش زرد مشخص شدن.

 

 

می بینید که ساخت منوی کشویی در HTML چقدر ساده ست. اما قطعا این منوی فکستنی چیزی نیست که شما بخواید تو سایت استفاده کنید. پس باید یه دستی روش بکشید که هم ‌مرتب‌تر بشه و هم ظاهر جذاب تری پیدا کنه. اینجاست که داستان طراحی منو با CSS شروع میشه.

 

طراحـی و استایل‌دهی به منـو با CSS

 

بعد از کدهای HTML  که مربوط به ساختار منو هستن ، باید چیدمان و رنگ و لعاب اون رو با CSS  تغییر بدید تا به یک منوی حرفه ای و استاندارد تبدیل بشه. اولین کار اینه که برای محکم کاری، همه اضافات رو حذف کنید تا مطمئن بشید همه چیز از اول شروع میشه. فقط خود لینک ها مهم هست فعلا.

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

 

از ابتدایی ترین ویژگی ها شروع می کنیم. یعنی فونت و سایز آیتم ها! اما قبلش باید خطوط زیرین گزینه های منو رو پاک کنید چون نیازی به اونها نیست. بنابراین بعد از فراخوانی لیست و زیر لیست به سیستم میگیم :

 

 

color: #00d084   که این مقدار معادل رنگ سبز هست . هر رنگ دیگه ای خواستید میتونید استفاده کنید.

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

خط های اضافه پاک شدن، فونت هم یکان شد و رنگ هم سبز، اما یه مشکل کوچیک هست و اون هم اینه که زیرمنوها قرار نیست همه باز باشن و اصلش اینه که کاربر با انتخاب هر گزینه از منو بتونه زیرمنوی اون رو ببینه درسته ؟ پس باید یجوری اون هارو پنهون کنید تا در حالت پیش فرض نمایش داده نشن.

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

تنظیمات موقعیت و چیدمان منو در صفحه

 

منوها معمولا به صورت افقی در سایت ساخته میشن تا هم فضای کمتری اشغال کنه و هم باعث به هم ریختن بخش های پایین تر اون نشه! پس در اولین قدم تنظیمات موقعیت و چیدمان منو با CSS  ، باید کاری کنیم که نمایش گزینه های منو از حالت عمودی به افقی تبدیل بشه و گزینه ها با فاصله متعادل کنار هم قرار بگیرن

 

بعد هم بسته به نیاز و سلیقه، تعیین میکنیم به صورت وسط چین باشه یا راست (زبان فارسی) و در منوهای انگلیسی هم وسط چین یا چپ. حالا بریم اینارو به کد تبدیل کنیم.

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

 

استفاده از رنگ یا تصویر پس زمینه اجباری نیست اما میتونه منوی سایت رو بیشتر از قبل برای کاربر قابل تشخیص کنه و نمای ظاهری خوبی هم به صفحه سایت بده به خصوص اگه برند شما رنگ سازمانی مشخص داشته باشه. بهرحال بد نیست روش ایجاد پس زمینه در منو با CSS رو هم بدونید.

 

توجه کنید که اینجا فقط سه خط کد جدید اضافه کردیم و مابقی همون هایی هست که در مرحله قبل نوشتیم!

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

هاور (Hover)

 

با هاور که آشنا هستید؟! برای یادآوری بدونید که با استفاده از کدهای CSS، میتونیم تعیین کنیم وقتی اشاره‌گر ماوس روی یک متن یا بخشی از سایت (به طور کلی یکی از تگ ها )قرار میگیره ، اتفاق موردنظر ما بیفته. مثلا وقتی روی یک گزینه از منوی سایت رفت، رنگش عوض بشه!

 

حالا ما میخوایم برای مثال، کاری کنیم موقعی که کاربر روی گزینه های منو میره، رنگ پس زمینه اون گزینه تغییر و نوشته ی اون بولد بشه. پس باید بنویسیم :

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

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

 

 

حالا خود ایتم های زیر منو هم انتخاب میکنیم و 100 میدیم تا کل عرض والد خودش رو بگیره

 

متن رو هم وسط چین میکنیم تا ظاهرش کاملا یکدست و منظم به نظر بیاد.

 

 

خروجی کدهای ما تا این مرحله در مرورگر به این شکل میشه :

 

نکات طلایـی ساخت منو حرفه‌ای با HTML  و CSS

 

 

• قبل از استایل دهی، reset کردن استایل های پیش فرض نکته مهمی هست که برای محکم کاری نیازه انجام بدید تا در ادامه کار به مشکل نخورید .گاهی پیش میاد که هر تغییری انجام میدید آخرش یه جای کار درست درنمیاد و دلیلش همین استایل های پیش فرض هست. پس سعی کنید این نکته رو رعایت کنید

 

• موقع ساختن زیرمنو، حتما توجه کنید که در تگ
•  همون گزینه منو ، تگ

 زیر منو رو تعریف کنید. مثل کاری که ما در این مثال کردیم و نکته رو نوشتیم. با اینکار بعدا در ظاهر کردن و اعمال تغییرات جدید روی زیرمنو به مشکل بر نمیخورید.

 

• شما در کدنویسی هر کاری می خواید انجام بدید اول باید اون بخش رو فراخوانی یا اصطلاحا صدا بزنید. بنابراین مثل انسانها هرکدوم باید به کلاس ها هم اسامی خاص و قابل فهم بدید تا کدهای مرتب و منظمی داشته باشید. هرچقدر حجم کدها بیشتر میشه رعایت این نکته هم مهمتر و واجب تر میشه.

 

• برای آشنایی بیشتر با کلاس ها و پراپرتی ها و تگ ها و اینکه چه کاربردی دارن و چه مقادیری می پذیرن میتونید از سایت free-learn.ir استفاده کنید.

 

• برای شناختن مسیر یادگیری هرکدوم از تخصص های برنامه نویسی ، sh  میتونه به شما دید خیلی خوبی بده

 

• اگه دوست دارید همه دستورات ممکن در فضای HTML و CSS  رو یکجا ببینید و نحوه استفاده از اونهارو یاد بگیرید، سایت com  برای شما ساخته شده. فقط کافیه چیزی که نیاز دارید رو سرچ کنید!

 

 

نتیجه

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

بنابراین نمیشه همه حالت های ممکن رو در یک مقاله جا داد. اما اگه به این حوزه علاقه دارید و دوست دارید یک متخصص حرفه ای در HTML  و CSS  باشید که اساس طراحی سایت هست، میتونید از دوره های موجود در سایت سبزلرن استفاده کنید که محتوا و مدرس اونها با وسواس زیادی انتخاب شده تا مطمئن بشیم هرکسی در هر سطحی بتونه به راحتی با اون ارتباط برقرار کنه و خیلی خوب و عمیق یاد بگیره. چون ترتیب سرفصل ها و نحوه انتقال مطلب مدرس در یادگیری تخصص های سطح بالایی مثل کدنویسی مسئله خیلی خیلی مهمیه!

دلتون شاد و کدهاتون بی باک