آموزش ساخت انواع منو در html

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

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

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

تا انتهای مطلب همراه ما باشید.

مراحل ساخت منو در HTML و CSS

گام اول- ساخت منو در HTML و CSS

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

خب برای ساخت منو میتوان از لیست کمک گرفت. به همین جهت یک UL نوشته و درون آن هر تعداد گزینه که نیاز داریم را با li ایجاد می‌کنیم. چون هر گزینه در منو باید به صفحه‌ای لینک شود درون li تگ a استفاده می‌شود:

اگر به فرزند سوم لیست توجه کنید متوجه می‌شوید که درون این li‌ مجدد از یک ul استفاده شده است. دلیل این کار ایجاد زیر منو برای گزینه لینک سوم است.

شما هم می‌توانید برای هر کدام از عناصر لیست که لازم است مانند مورد سوم زیر منو تعریف کنید. که ما برای جلوگیری از طولانی شدن کد فقط یک زیرمنو ایجاد کرده‌ایم.

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

خب حالا وقت آن رسیده که به کمک دانش CSS خود این لیست را به یک منوی زیبا تبدیل کنیم. برای اینکار کافیست از CSSهای زیر استفاده کنیم. من کدهای CSS را بخش به بخش قرار میدهم تا هم خروجی کار را مرحله به مرحله ببینید و هم به توضیحات مورد نیاز هر بخش دسترسی داشته باشید.

همانطور که در دروس ابتدایی CSS گفته شد، باید کدهای CSS را درون تگ style قرار دهید یا به صورت یک فایل مجزا با کمک link به پروژه اضافه کنید.

به کمک کد بالا برای نوار منو یک بک‌گراند قراردادیم همچنین با direction و text-align صفحه را برای نوشتن مطالب فارسی آماده کردیم.

علامت لیست را از li حذف و آنها را به صورت Inline-block کنار هم قراردادیم. برای از بین بردن خط زیر تگ a از text-decoration استفاده شده است. همچنین برای اینکه لینک به خوبی کنار هم قرار بگیرند و فاصله داشته باشند روی display و padding تگ a کار کردیم.

خب همانطور که مشاهده می‌کنید زیر منو نظم کلی صفحه را برهم زده پس بهتر است در حالت کلی این زیر منو مخفی شود:

در این مرحله نوار منوی ما تقریباً آماده است. اما برای نمایش زیر منو هنوز هیچ کاری انجام نداده‌ایم. ابتدا باید برای گزینه‌هایی که دارای زیر منو هستند یک آیکون و فلش رو به پایین قرار دهیم تا کاربر متوجه وجود زیر منو شود.

استفاده از فونت آیکون‌ها در منو

فونت آیکون در واقع یک سری آیکون هستند که در فرمت فونت مورد استفاده قرار می‌گیرند. یعنی آیکون‌هایی که در فرمت تصویر نیستند! این روش به سبک بودن صفحه کمک می‌کند همچنین به ما این امکان را می‌دهد که مانند نوشته‌ها به آنها استایل دهیم.

یکی از معروف ترین دسته فونت آیکون‌ها font awesome است. کافیست لینک زیر را در بخش head سند html‌ خود قرار دهید و بعد برای استفاده از هر آیکون کد مربوط به هر آیکون را بیابید.

خب حالا برای استفاده از یک آیکون فلش رو به پایین کافیست کد آن را در تگ li مربوط به لینک سوم قرار دهم:

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

از لحاظ تراز عمودی این آیکون کمی نامتناسب است که باید با استایل‌های زیر آن را در سطح نوشته‌ها قرار دهیم. همچنین کمی فاصله از نوشته لینک سوم نیاز دارد:

ایجاد افکت hover در منو

اگر اشاره‌گر موس را روی هرکدام از گزینه‌های منو ببریم هیچ اتفاقی نمی‌افتد! این از جذابیت کار کم می‌کند. برای انجام این کار از hover‌ استفاده می‌کنیم.

برای تگ a از hover استفاده کردیم. برای اینکه این تغییر رنگ یه دفعه نباشد با ملایمت انجام بشود از چه ویژگی استفاده می‌شود؟! بله درست است از transition که باید به این تگ داده شود.

گام سوم – ساخت و نمایش زیر منو با CSS

خب منوی مدنظر ما تکمیل شد حالا کافیست بگوییم زمانی که به گزینه‌های دارای زیر منو اشاره می‌شود، زیر منوی آنهای نمایش داده شود. برای این کار کافیست باز از hover کمک بگیریم:

خب به کمک کد بالا گفتیم اگر اشاره‌گر روی li قرار گرفت، display زیرمنو از حالت none به block تغییر کند که باعث می‌شود از حالت مخفی خارج شود. همچنین استایل‌هایی را به li دادیم که کمی زیباتر شود.

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

از نظر استایل و کارکرد همه چیز مناسب است جز یک مورد و آن هم محل قرار گرفتن زیر منو است!

تنظیم نمایش زیر منو با CSS

خب تنها کاری که از مینی پروژه ساخت منو در HTML و CSS باقی مانده این است که زیر منو دقیقا زیرِ منوی اصلی قرار بگیرد. برای اینکار به سراغ ویژگی position می‌رویم که امیدوارم این درس را به خوبی مطالعه کرده باشید:

ابتدا استایل‌هایی مثل رنگ پس زمینه، عرض دلخواه به زیر منو داده شده است. همچنین آیتم‌های زیر منو را از حالت سطری خارج کردیم تا آنها زیر هم قرار بگیرند (با display:block)

سپس ul.submenu را به کمک position دقیقا زیر li خود قرار دادیم. فراموش نکنید در صورتی absolute درست کار می‌کند که والد آن relative باشد پس به Li هم باید position بدهیم: