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

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

لطفاً توجه داشته باشید که ما از ویژگی‌های CSS (تبدیل، انتقال) استفاده می‌کنیم که فقط در مرورگرهای مدرن کار می‌کنند. نمونه ای از جایگزین برای مرورگرهای غیر پشتیبانی را می توان در انتهای فایل component.css یافت که به سادگی منوی سطح اول را نشان می دهد. در غیاب JS هم همین کار را می کنیم.

برای منو، به ساختار تودرتو زیر نیاز داریم:

در اینجا، هر سطح در یک تگ div با کلاس mp-level پیچیده شده است. ما نمی‌توانیم این نوع موقعیت‌یابی ثابت را در منو اعمال کنیم، زیرا تبدیل‌ها باعث می‌شود که مانند یک عنصر موقعیت مطلق رفتار کند، بنابراین باید از موقعیت‌یابی مطلق استفاده کنیم که منجر به مشکل رفتار ناخواسته سایت می‌شود ( پیمایش منو و بسته به ارتفاع سند).

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

اکنون استایل های CSS زیر را به عناصر اختصاص می دهیم:

Html, body, .container, .scroller ( ارتفاع: 100%; ) .scroller ( overflow-y: scroll; ) .scroller, .scroller-inner ( موقعیت: نسبی؛ ) .container ( موقعیت: نسبی؛ سرریز: پنهان; پس زمینه: #34495e;)

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

mlPushMenu (document.getElementById("mp-menu")، document.getElementById("مشهور"));

یا اگر زیر منوها باید سطوح قبلی را پوشش دهند:

mlPushMenu (document.getElementById("mp-menu")، document.getElementById("trigger")، (نوع: "cover"));

Shifter یک پلاگین jQuery برای ناوبری ساده موبایل است. Shifter با بررسی عناصر هدف در DOM و اتصال رویدادها بر روی آنها کار می کند.

Slicknav

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

منوترون

Menutron منوهای پیمایش شما را از یک لیست به یک منوی انتخابی در صورت تغییر اندازه مرورگر تبدیل می کند. در دستگاه های تلفن همراه، منوی انتخاب یک کنترل بومی را نشان می دهد و انتخاب یک مورد را آسان تر می کند.

منوی واکنش گرا و لمسی

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

jQuery.mmenu

MMENU یک پلاگین جی کوئری برای ایجاد یک منوی کشویی نرم و شبیه برنامه برای وب سایت تلفن همراه یا وب سایت پاسخگو است.

ناوبایل

jQuery Navobile یک پلاگین جی کوئری است که ناوبری موبایل را آسان می کند. Navobile از CSS برای اعمال ترجمه های CSS3، تشخیص دستگاه تلفن همراه و ناوبری تعیین موقعیت استفاده می کند.

FlexNav

FlexNav یک مورد استفاده برای اولین بار در موبایل برای درخواست‌های رسانه‌ای است و دارای یک منوی لایه‌بندی زیبا با پشتیبانی از لمس، باز شدن شناور و قابلیت دسترسی به صفحه کلید زبانه‌دار است.

منوی آماده پاسخگوی شبکیه چشم

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

منوی باریک

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

منوی کشویی افقی

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

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

یک وظیفه

اسکرین شات های زیر موقعیت هایی را با الگوها در صفحه نمایش دستگاه تلفن همراه نشان می دهد. اگر پیمایش دارای 3 یا 4 دکمه باشد، طرح آن در یک خط ذخیره می شود. اما وقتی منو شامل 6 مورد یا بیشتر باشد، به نظر می رسد یک دسته زشت است.

راه حل

یکی از راه های متداول این است که پیمایش را بر اساس عنصر انتخاب به یک کشویی تبدیل کنید. این راه حل دارای این اشکال است که عنصر select را نمی توان با CSS استایل بندی کرد. افزونه های جاوا اسکریپت مانند Chosen به شما امکان می دهند منو را تغییر دهید، در غیر این صورت باید به سبک های سیستم برای لیست کشویی بسنده کنید. همچنین، هنگامی که نسخه عریض ساختار منو به یک لیست کشویی در یک دستگاه تلفن همراه تبدیل می شود، کاربر می تواند گمراه شود.

2) خروجی را مسدود کنید

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

3) نماد منو

و آخرین راهی که در آموزش خود به آن نگاه خواهیم کرد استفاده از نماد منو برای فعال کردن ناوبری است. این رویکرد باعث صرفه جویی در فضای صفحه (مهم در یک دستگاه تلفن همراه) می شود و به شما کنترل کامل بر ظاهر و احساس با CSS می دهد. نماد منو و خود ناوبری مطابق با سبک کلی سایت قابل ارائه است.

ناوبری موبایل با جی کوئری فعال شد

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

منوی ما از ساختار ساده ای استفاده می کند:

منو برای عملکرد به کد جاوا اسکریپت نیاز دارد. تابع عنصر را آماده می کند