‏منوی بازشونده فقط با CSS و clip-path

نویسنده تو این مقاله یه آزمایش ساده ولی جالب با خاصیت clip-path تو CSS رو نشون می‌ده: یه منو که وقتی کاربر روی دکمه کلیک می‌کنه باز می‌شه، اونم فقط با HTML و CSS و بدون هیچ جاوااسکریپتی. به گفتهٔ نویسنده، ایدهٔ اصلی رو از سایت iventions.com الهام گرفته.

کل افکت روی دو تا clip-path سواره. اولیش یه دایره‌ست که از گوشهٔ بالا-چپ صفحه شروع می‌شه و اون‌قدر بزرگ می‌شه تا کل صفحه رو بپوشونه و منو رو نمایش بده. نکتهٔ باحالش محاسبهٔ شعاع این دایره‌ست:

clip-path: circle(calc(1.42 * 100vmax) at 0 0);

اینجا vmax یعنی بزرگ‌ترین مقدار بین عرض و ارتفاع viewport. نویسنده توضیح می‌ده که چرا تو عدد 1.42 ضرب شده: این عدد تقریباً ریشهٔ دوم ۲ هست، یعنی همون نسبتی که لازمه تا دایره مطمئن باشه از گوشهٔ مخالف صفحه هم رد می‌شه و هیچ گوشه‌ای جا نمی‌مونه.

clip-path دومی یه polygon هست که برای شبیه‌سازی اون افکت «پرتو» استفاده شده. نویسنده می‌گه فعلاً مختصات این polygon به صورت ثابت (hardcode) نوشته شده، ولی می‌شه با جاوااسکریپت این ابعاد رو پویا حساب کرد تا با اندازهٔ منو و واکنش‌گرایی (responsive بودن) هماهنگ بشه.

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

نکات کلیدی:

• یه منوی بازشونده فقط با HTML و CSS، بدون جاوااسکریپت
• استفاده از دو clip-path: یه دایرهٔ بزرگ‌شونده و یه polygon برای افکت پرتو
• محاسبهٔ شعاع با vmax ضربدر 1.42 (تقریباً ریشهٔ دوم ۲) تا کل صفحه پوشونده بشه
• مختصات polygon فعلاً ثابته ولی می‌شه با JS پویاش کرد