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

ا

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

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

منوی عمودی کشویی

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

  • منوی کناری کشویی انیمیشنی ساده
  • منوی کناری ساده بدون انیمیشن
  • منوی کناری که در هنگام باز شدن کل صفحه را هل میدهد تا وارد شود
  • منوی کناری که در هنگام باز شدن، کل صفحه را هل میدهد و یک پرده نیمه شفاف سیاه روی آن میکشد
  • منوی کناری تمام صفحه انیمیشنی

ساخت  منوی عمودی با html و CSS

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

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

کد CSS زیر را به فایل استایل خود اضافه کنید:

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

منوی عمودی کشویی (اسلایدی)

منوی عمودی کشویی

اگر میخواهید منوی شما به صورت کشویی یا اسلایدی وارد صفحه شود باید کد جاوااسکریپت زیر را قبل از تگ پایان <body/> قرار دهید:

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

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)