بهترین آموزش های منوی پاسخگو در Tuts+

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

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

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

در اینجا اولین تغییر از منوی سرصفحه ما آمده است:

و دومی:

از اینجا می‌توانید حتی عمیق‌تر بروید و منوها را پویا کنید (من هنوز یک آموزش در مورد تبدیل یکی از منوها به منوی پویا از طریق وردپرس به شما بدهکارم!)

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

منوی عمیق سه سطحی ما در اینجا آمده است:

هیچ چیز شما را از پویا کردن این منو باز نمی دارد. من بارها از همین تکنیک پیروی کردم تا منوهای مشابه را در سایت های وردپرسی که روی آنها کار می کردم پویا کنم!

علاوه بر این، اگر نیاز به پشتیبانی از یک سایت قدیمی دارید که از نسخه قدیمی jQuery استفاده می کند و به یک راه حل سریع برای منوی چند سطحی off-canvas نیاز دارید، من شما را تحت پوشش قرار می دهم. منوی کشویی زیر را که از نسخه قدیمی‌تر استفاده می‌کند، بررسی کنید mmenu.js.

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

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

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

این آموزش به شما یاد می دهد که چگونه یک منوی پیمایش خارج از بوم پاسخگو دیگر ایجاد کنید. در اینجا، خارج از بوم بین منوی ثابت و روکش بنر زندگی می کند و با یک انیمیشن اسلاید در ظاهر می شود.

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

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

وارسی نسخه ی نمایشی (که بیش از 30 هزار بار دیده شده است!) و به آن ❤️ بدهید!

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

این سایت استاتیک ساخته شده با TailWind CSS از طریق ایجاد یک منوی حداقل پاسخگو می گذرد و بر نحوه حفظ حالت فعال آن در بارگذاری صفحه تأکید می کند.

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

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

حتماً تمام دموهای موجود در این لیست را بررسی کنید و به خصوص موارد زیر و تغییرات آن را بسته به اندازه صفحه مشاهده کنید.

نتیجه

این لیست باید به شما الهام کافی برای ایجاد منوهای پاسخگوی خود را بدهد! از دموها لذت ببرید، آموزش های مرتبط را بخوانید و در آخر مطمئن باشید Envato Tuts+ را در CodePen دنبال کنید برای قلم های خلاقانه تر!

مثل همیشه، خیلی ممنون که خواندید!