نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1816
تاریخ بروزرسانی ۵ فروردین ۱۴۰۱

ساخت منوی آکاردئونی با css

 نحوه درست کردن منوی آکاردئونی با css

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

 

نحوه ی ایجاد منوی آکاردئونی با css

در مرحله­ ی اول ایجاد منوی آکاردئونی باید کد های html برای ساخت آیتم های اصلی منو نوشته شود. ابتدا باید یک فهرست توسط ul ایجاد کرد و آیتم های  اصلی منو  را داخل آن قرار داد. این آیتم ها باید در تگ li و داخل یک تگ a قرار گیرند. برای هر تگ li باید یک id متفاوت در نظر گرفت و همچنین قسمت href تگ a داخل li نیز باید آدرس آن با نام id تگ li یکسان باشد.

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

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

تا اینجا آیتم های اصلی منو طراحی شده است. حال برای این که بتوانید زیر منو داشته باشید باید به هر یک از منو های اصلی که می خواهید یک بلاک از ul و li اضافه کنید. اما تگ های li به کار رفته برای زیر منو نیازی به شناسه ندارد . برای مثال می خواهیم به آیتم اصلی وب یار زیر منوی اضافه کنیم. به کد های زیر توجه کنید.

به همین ترتیب می توانید به سایر آیتم های اصلی منوی آکاردئونی نیز زیر منو اضافه کنید.

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

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

کد کامل ساخت منوی آکاردئونی با css

کد های css زیر برای نمایش یک منوی آکاردئونی ساده می باشد. این کد ها صرفا برای نمونه می باشد و شما می توانید براساس نیاز خود این کدها را تغییر دهید.

 

منو آکاردئونی

در این مطلب نحوه ساخت منوی آکاردئونی با css را با مثال واقعی برای تان ارائه کردیم،شما می توانید این کدها را در سایت خود وارد کنید و تغییرات مد نظرتان را روی آن اعمال کنید. امیدوارم برای شما مفید بوده باشد. برای دریافت آموزش های بیشتر می توانید به سایت وب یار (Webyar.net) مراجعه کنید.

 

مقالات مرتبط

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