دانلود قالب وردپرس, دانلود قالب HTML, دانلود افزونه, آموزش

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

30

آموزش ساخت منوی کشویی با 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 بزنید)

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

دسترسی آسان به این مطلب لینک کوتاه :
QR Code For:  آموزش ساخت منوی کشویی با CSS و HTML

شاید از اینها هم خوشتان بیاید!
30 دیدگاه
  1. elyas می گوید

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

    1. MrCode می گوید

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

  2. یوسف می گوید

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

    1. MrCode می گوید

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

  3. محمد می گوید

    ممنون از آموزش ساخت منوی کشویی
    موفق باشید

  4. شیرین می گوید

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

    1. MrCode می گوید

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

  5. ali می گوید

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

  6. پیمان می گوید

    سلام . منوی آبشاری html شما رو استفاده کردم ولی مشکلم اینه زیر منو ها می رن زیر آیتم پائینی منو و نصفه نشون داده می شن. چکار کنم که بیاد روی آیتم پائینی نمایش داده بشه ؟
    ممنون می شم راهنمائیم کنین. با تشکر

    1. MrCode می گوید

      سلام. شرمنده دقیقا متوجه منظورتون نمیشم. یه لینک از نتیجه کارتون ارسال کنید که مسئله ای که ذکر کردید توش معلوم باشه.

  7. علی می گوید

    سلام لطفا حالت پیش نمایش رو فعال کنید که قبل از دانلود بتونیم ببینیم که منو چه شکلی هست

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

    سلام ببخشید من این پست شمارو با ذکر منبع گزاشتم داخل سایتم مشکلی نداره اگه مشکل داره لطفا بگید حذف کنم با تشکر

    1. MrCode می گوید

      سلام
      با ذکر منبع از دید من مشکلی نداره ولی از لحاظ سئو، درج مطالب کپی شده، به ضرر خودتون خواهد بود.

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

    سلام متوجه نشدم چه ضرری خواهد داشت

  10. navid mohajeri می گوید

    احسنتم ماشالله <3

  11. افشین می گوید

    خدا خیرتون بده

    1. MrCode می گوید

      مرسی ?

  12. علی می گوید

    باسلام
    خسته نباشین ممنون پیروز باشید

  13. علی می گوید

    باسلام
    لطفا شیشه ای کردن منوهم آموزش بدید
    ممنون

  14. steward می گوید

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

  15. علی می گوید

    سلام مطلبتون خیلی خوب و مفیده ولی یه مشکل دارم
    فایلhtml که با مطلبتون درس کردم کار میکنه ولی هرکاری کردم استایل بدم بهش نشد همون متن معمولی html میاد میشه راهنمایی کنید

    1. MrCode می گوید

      سلام
      با عرض شرمندگی متوجه منظورتون نشدم. شما به شیوه استاندارد و معمولی که با css کار میکنید، در اینجا هم باید به همون صورت عمل کنید.

  16. علی می گوید

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

    1. MrCode می گوید

      سلام
      ممنون از شما.
      دلیل مشکل شما این هست که این آموزش صرفا به ایجاد یک منوی ساده پرداخته. این منو دارای استایل های واکنش گرایی مخصوص دیوایس های موبایل و … نیست.
      اگر میخواید کاری کنید که بشه ازش در دیوایس هایی که صفحه نمایش کوچکتری دارند استفاده کنید، میبایست براش استایل های واکنش گرا تعریف کنید.
      راهنمای جامع در این مورد در لینک زیر در دسترسه :
      https://www.w3schools.com/css/css_rwd_intro.asp

      البته برای منوها معمولا لازمه از یک سری توابع جی کوئری از پیش ساخته استفاده کنید تا در دیوایس های موبایل تبدیل به منوهای مخصوص موبایل یا منوی های off-canvas و … بشن.

      1. علی می گوید

        خیلی خیلی ممنون مستر کد

      2. MrCode می گوید

        خواهش میکنم 🙂

  17. Ali می گوید

    ممنون خیلی مفید بود

  18. حامد می گوید

    سلام . آموزش بسیار خوب ۤ، عالی و ٖکاربردی بود ولی توی سیستم عامل های شرکت اپل از جمله IOS و MACOS نمایش داده نمیشه . لطفا راهنمایی کنید …

    1. MrCode می گوید

      سلام
      دقیقا متوجه منظورتون نمیشم. من دسترسی ای به دو سیستم عامل ذکر شده ندارم ولی تست روی سافاری انجام شد و مشکلی در نمایش مشاهده نشد.

  19. صمیم می گوید

    آموزش خوب و عالی بود تشکر زیاد

ارسال پاسخ

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