آموزش ساخت منو با CSS و HTML | جدیدترین + سورس کد منو کشویی

برای درک راحت تر

ساخت منو با HTML  و CSS

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

اگه دوست دارید از قدم صفرم،

طراحی منو با  CSS و HTML

رو در قالب مثال عملی یاد بگیرید، جای خوبی اومدید. جدا از اون شما

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

: شمارو با انواع منوهایی که ممکنه اسمشون رو هم شنیده باشید آشنا می کنیم تا بدونید اساسا چند نوع منو داریم

قدم دوم

: ویژگی های یک منوی حرفه ای رو بررسی میکنیم تا بدونید کلا یک منوی استاندارد باید چه ویژگی هایی داشته باشه. دونستن این نکات به شما کمک میکنه با HTML و CSS یک منوی جذاب و کاربرپسند بسازید.

قدم سوم

: سراغ تگ های شرکت کننده در ساخت منو با HTML  میریم و اسم و کاربردشون رو دونه دونه به شما میگیم تا بهتر تو ذهنتون بمونه تا وقتی اونها بین کدهای شلوغ و غریبه دیدید، مثل یه رفیق قدیمی راحت بشناسید.

قدم چهارم : شروع به

ساخت منو با HTML

و طراحی و

استایل دهی با CSS

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

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

تعریف و تفاوت انواع منو

به زبان ساده، منو به مجموعه ای از لینک های لیستی یا تودرتو گفته میشه که مثل فهرست یک کتاب عمل میکنه و بخش های مختلف وب سایت و محتوای اون رو را به کاربر نشان میده!

با این تعریف ساده ممکنه این سوال برای شما پیش بیاد که ریشه نامگذاری انواع منو مثل منوی افقی، منوی کشویی، منوی رسپانسیو چی بوده و مثلا منظور از منوی ناوبری(Navigation Bar  ) دقیقا چیه؟!

منوی افقی ( Horizontal Menu )

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

منوی عمودی ( Vertical Menu )

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

منوی کشویی ( DropDown Menu )

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

منوی فوتر ( Footer Menu )

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

مگا منو ( Mega Menu )

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

منوی رسپانسیو ( Responsive Menu )

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

منوی ناوبری ( Navigation Bar )

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

نکات مهمی که قبل از ساخت منو با HTML و CSS  باید بدانید

پیشبینی تعداد آیتم های منو و زیرمنوها

هرچه تنوع و حجم مطالب وب سایت بیشتر باشه، طبیعتا نیاز به لینک ها، زیرمنوها و سطوح بیشتری خواهد بود و هرچقدر این کارها دقیق تر انجام بشه، کاربر هم سریع تر به محتوای موردنظر خودش دسترسی پیدا میکنه!

استایل مطابق با UI (رابط کاربری) وب سایت

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

پوشش کامل محتوا

فرض کنید یک وب سایت آموزشی با 30 موضوع مختلف وجود داره اما در بخش منو به همراه زیرمنوها، کاربر فقط 8 مورد از اونهارو می بینه و مابقی از دیدش مخفی میمونن! در حالی که شاید محتوای موردنظرش تو همون 22 بخشی بوده که لینک مستقیم در منو نداشتن!

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

رعایت اولویت

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

مختصر و مفید

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

کدنویسی سبک و بهینه

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

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

مهمترین تگ هایی که برای

ساخت منو در HTML 

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

تگ

اصلی ترین تگ برای ساخت منو در HTML

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

تگ

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