۸ طراحی و متد متن باز برای منوهای آکاردئونی در سی‌اس‌اس

شما می توانید با استفاده از کتابخانه جی‌کوئری منوهای بسیار زیبایی بسازید خوشبختانه اکثر پلاگین های این کتابخانه نیز به صورت رایگان عرضه می شوند. این منوها اغلب منوهای Drop-Down یا منوهای رسپانسیویی هستند که در کنار‌ه‌ی وبسایت ظاهر و مخفی می شوند اما اکثر توسعه دهندگان منوهای آکاردئونی را به کلی فراموش کرده اند. 

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

آکاردئون افقی

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

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

یکی از نمونه های بسیار زیبا این مورد است که توسعه دهنده ای به اسم Wesley van Wyk آن را تنها با استفاده از سی‌اس‌اس و کمی خیال‌پردازی ساخته است. در این نمونه برای باز و بسته شدن تب ها -براساس کلیک کاربر- از انیمیشن چرخه ای استفاده می شود که بسیار زیبا است. به صورت کامل برای شما زمانی که می خواهید از منوهای آکاردئونی در تعداد زیادی از مرورگرها استفاده کنید شاید انتخاب مناسبی نباشد اما باید گفت که یکی از زیباترین افکت های سی‌اس‌اسی است که معمولا به آن نیاز دارید.

آکاردئون Radio

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

این نمونه توسط Scott Earl طراحی شده است و نشان می دهد که یک منو آکاردئونی همزمان می تواند هم زیبا و هم کارا باشد. این طراحی خاص با روح و استفاده کردن از آن به شدت ساده است. از این منوها می توان در موبایل نیز استفاده کرد.

ورودی های Radio در این طراحی به تمامی باز-طراحی شده اند و به خوبی در بین این منوها جای گرفته اند. استفاده از این تکنیک بهترین راهکار برای ساختن یک منو آکاردئونی مناسب بدون استفاده از جاوا اسکریپت است. 

همچنین می توانید برای دیدن کارهای بیشتر و جالب از Scott به صفحه کدهای وی سر بزنید. ممکن است بسیار مفید باشند.

اسلایدر آکاردئونی CSS3

افکت هایی که با استفاده از Hover کردن قرار می گیرد را راحت می توانید با استفاده از کلاس :hover مربوط به سی‌اس‌اس تنظیم کنید. این بدان معنا است که به راحتی می توانید تنها با استفاده از سی‌اس‌اس بخش عظیمی از تعاملات کاربران را کنترل نمایید. 

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

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

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

آکاردئون CSS-Only

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

این طرح به سادگی به شما نشان می دهند که چگونه می توانید به سادگی تنها با استفاده از CSS3 و ورودی های Radio اینکار را انجام دهید. 

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

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

آکاردئون Multi-Open

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

این طرح به صورت کامل با استفاده از سی‌اس‌اس3 ساخته شده اما بجای استفاده از ورودی Radio از ورودی checkbox استفاده می کند. همانطور که می دانید یکی از ویژگی های این ورودی این است که کاربر در عین حال می تواند چند ورودی را با همدیگر انتخاب کند، در این منو آکاردئونی نیز کاربر می تواند چندین منو را همزمان با همدیگر باز کند. 

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

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

آکاردئون Activated

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

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

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

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

Simple Menu

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

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

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

Accordion Sans-Animation

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

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

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

منبع