آموزش ساخت منوی کشویی با CSS و HTML

91

آموزش ساخت منوی کشویی با CSS و HTML - آموزش ساخت منوی دراپ داون عمودی

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

ایجاد منوی کشویی با استفاده از CSS و HTML

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

منوی دراپ داون css و html

ساختار HTML منوی کشویی

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

منوی کشویی که امروز ایجاد میکنیم (و تقریبا هر منوی کشوی دیگری که هر روز در سایت های مختلف مشاهده میکنید) از لحاظ کد HTML ساختار بسیار ساده ای دارند. برای ایجاد این نوع منو ها عموما از تگ های ul و li استفاده میشود. ما هم در ساختار منوی خود از همین کدنویسی پیروی میکنیم. البته ما اینجا یک کار دیگر هم انجام میدهیم. کل ناحیه منو را با تگ nav که از تگ های html5 و مخصوص منوهای ناوبری است، احاطه میکنیم تا محل قرارگیری منو از لحاظ ساختار کدنویسی، کاملا مشخص باشد. در این حالت یک منوی ساده تک مرحله ای (فاقد هر نوع زیرمنو) دارای ساختاری مشابه زیر خواهد بود :

فکر میکنم نیازی به توضیح نباشد که کد بالا فقط یک مثال است و آیتم های منو میتوانند با توجه به نیاز شما متفاوت باشند. همچنین در کد بالا بجای لینک دلخواه در تگ a از نامبرساین یا # استفاده کرده ایم که شما میبایست آن را با لینک دلخواه خود جایگزین کنید.

تا اینجا کدی که ما در اختیار داریم تنها حاوی سطح اول منوهای ماست. حال برای اینکه بتوانیم به آیتم های دلخواه منو، زیر منو اضافه کنیم، کافی است دقیقا با پیروی از همان ساختار یک بلاک کامل ul و li به آیتم منوی دلخواهمان اضافه کنیم تا آیتم مورد نظر دارای زیر منو شود. به عنوان مثال حالا میخواهیم سه زیرمنوی “وردپرس، جوملا و متفرقه” را به آیتم منوی آموزش ها اضافه کنیم. در این حالت کد ما به شکل زیر در می آید :

همانطور که مشاهده میکنید یک بلاک ul کامل به تگ li مربوط به آیتم آموزش ها اضافه کرده ایم. مجددا به همین ترتیب میتوانیم به زیرمنوی متفرقه هم دو زیرمنوی دیگر اضافه کنیم :

همانطور که مشاهده میکنید، حالا ما یک منوی سه سطحی داریم. در حال حاضر با توجه به اینکه برای این منو استایل css ای ننوشته ایم، نتیجه کد نوشته شده در بالا چیزی مشابه تصویر زیر خواهد بود :

نمونه منوی دراپ داون فاقد استایل

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

استایل CSS منوی کشویی

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

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

در ادامه تصمیم داریم نحوه نمایش و رنگ منو را تعیین کنیم :

در اینجا یکی از بخش های مهم استفاده از position : relative برای منو است. انتخاب پوزیشن در حالت relative به ما اجازه میدهد که بعدا محل قرارگیری آیتم های زیرمنو را با توجه به آیتم های راس منو مرتب کنیم.

سپس نوبت به تعریف استایل های آیتم های رده اول منو میرسد :

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

تا اینجا آیتم های رده اول منو دارای استایل های مناسب هستند. حالا نوبت آیتم های سطح دوم منو است. باید برای این آیتم ها هم استایل های مناسبی تعریف کنیم :

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

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

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

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

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

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

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

سخن پایانی

به عنوان یک تمرین پایانی حالا میتوانید سعی کنید به آیتم های منوی دراپ داون ای که با هم ایجاد کردیم، آیکن اضافه کنید. (برای این کار میتوانید سری به آیکن های فونتی Font Awesome بزنید)

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

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
91 دیدگاه
  1. سینا می گوید

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

  2. ارمین می گوید

    توی گوشی بد نشون میده

    1. MrCode می گوید

      چون ریسپانسیو نیست. این آموزشو چک کنید :
      https://mrcode.ir/?p=5983

  3. ابوالفضل می گوید

    سلام ممنون بابت مقالات اموزشی عالیتون

  4. شکیب می گوید

    سلام
    ممنون عالی توضیح دادین

  5. Saba می گوید

    خیلی ممنون خیلی عالی بود فقط برای من همه چیز رو نمایش میده ولی زیر منو هارو نمایش نمی ده چیکار کنم؟

  6. شیما می گوید

    خیلی ممنونم عالی بود سالم باشید

  7. amir mohammad می گوید

    خیلی عالیه ممنون از اموزشتون

  8. معین می گوید

    من میخوام این کد منو رو برای ورد پرس اجرا کنم
    راهنمایی کنید چگونه باید اجراش کنم همین کد

  9. sahar می گوید

    باید دیسپلی رو نان بزارید و وقتی روش هور شد دیسپلی رو بلاک کنید

  10. Pouria می گوید

    سلام من یک زیر منو تو تگ table تعریف کردم و زیر این تگ یه عکس گذاشتم اما وقتی رو زیر منو خا hover میکنم زیر عکس قرار میگیره و کامل نشون داده نمیشه چیکار کنم ؟؟ ??فقط html و css کار میکنم

    1. یک فرانت اند کار می گوید

      سلام باید برای عکس یکم استایل بدی مثلاً طول و عرض و اینا رو تعریف کنی

  11. علی می گوید

    مرسی از مقاله خوبتون و همیم طور سایر مطالب مفید سایتتون

  12. Mbynas می گوید

    چرا برای من زیر منو هارو نمایش نمیده

  13. ابوالفضل می گوید

    سلام، نمونه آنلاین منو را در http://codepen.io قرار دهید.

  14. محمد سجاد می گوید

    عالی خیلی مفید بود😊😊😊

ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.