وب دیزاینر

ارائه دهنده خدمات تحت وب

WebDesigner
الآن اینجا هستید:
صفحه اصلی » بانک کد » CSS » منو چرخشی سه بعدی

تبلیغات

منو چرخشی سه بعدی

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

ساختار منو

ابتدا از تگ <header> برای جایگذاری لوگو و دکمه منو (cd-3d-nav-trigger.) و تگ <main> برای قرار دادن محتوای اصلی استفاده می کنیم. از یک لیست غیر ترتیبی (ul) برای منو استفاده کردیم که آن را در تگ <nav> قرار می‌دهیم. کلاس .cd-marker برای مشخص کردن مورد انتخاب شده در منو قرار داده شده است.

من یک بلاک متن هستم، روی دکمه ویرایش کلیک کنید تا این متن را تغییر دهید. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

 

افزودن استایل

برای واقعی جلوه دادن انیمیشن، ترنسفرم در CSS3 را برای <header> و <main> و <navigation> اعمال نمودیم. مشاهده اجمالی از انیمیشن این منو را در تصویر زیر می‌بینید.

به صورت پیش فرض، منو (cd-3d-nav-container.) منو در صفحه پنهان است ((translate:-100%) و (visibility:hidden))، و لیست غیرترتیبی (cd-3d-nav.) چرخش دارد (rotateX(90deg) و transform-origin: bottom center). وقتی روی دکمه منو کلیک می‌شود، کلاس .nav-is-visible به <main>، <header> و <nav> اضافه می‌شود و این حرکت به تغییر ارتفاع منو تعبیر شده و .cd-3d-nav به حالت (rotateX(0)) برمی‌گردد. از حرکت ترنسفرم CSS3 یک انیمیشن نرم ساخته می‌شود.

المان cd-marker. برای مشخص کردن آیتم انتخاب شده در منو به کار رفته که به صورت خطی رنگی در زیر آیتم دیده میشود. (پیکان کوچک خط نیز با کلاس ::before ساخته شده است.) برای تغییر رنگ خطها تنها کافی است در کلاس .color-n رنگ آیتم مورد نظر را تغییر دهید.

مدیریت ایونت

برای افزودن و یا حذف کلاس nav-is-visible. در هنگام کلیک دکمه منو از جی‌کوئری استفاده شده است. همچنین وقتی که کاربر آیتمی را انتخاب کرده و روی آن کلیک می‌کند رنگ آن با بقیه آیتم‌ها متمایز می شود.



پشتیبانی مرورگر ها
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

برچسب ها:
اشتراک گذاری:
مطالب مرتبط :
درباره نویسنده: محمدی نژاد

نظرات: