نماد همبرگر: روش های جدید برای استفاده از آن. به سرعت یک منوی همبرگر با استفاده از jQuery ایجاد کنید

2. یک نماد همبرگر را در منوی پیمایش قرار دهید

در سایت iconfinder.comنماد مورد نظر را پیدا کنید، رنگ را به مورد نظر تغییر دهید (آیکون ویرایش)، دانلود با فرمت SVG، آن را در مرورگر باز کنید، کد را از بازرس وب کپی کنید.

کد کپی شده در بالا را به جای متن "منو" جایگذاری کنید.

در این مرحله، در رزولوشن های دسکتاپ، منو به شکل زیر است: SVGآیکون را با نوشتن کد زیر مخفی کردیم.

منوبرگر (
نمایش: هیچ /* نماد همبرگر پنهان شد */
}

3. به پرسش رسانه بروید

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

صفحه رسانه @ و (حداکثر عرض: 530 پیکسل) (
.منو (
نمایش: هیچ /* آیتم های منو پنهان هستند */
پس زمینه: #f1f2f4;
موقعیت: مطلق;
}

منو (
شناور: هیچ /* آیتم های منو در ستون ها */
}

منوبرگر (
صفحه نمایش: inline-block; /* نماد همبرگر قابل مشاهده است */
}
}

4. منوی همبرگر را گسترش دهید

قبل از باز کردن چه باید کرد منوی همبرگر? لازم به ذکر است موقتا در CSSکد درخواست رسانه /* نمایش: هیچ */و منوی افقی را به یک منوی عمودی تبدیل کنید. برای انجام این کار، بیایید اقدام را لغو کنیم شناور، کد زیر را به کوئری رسانه اضافه کنید.

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

و بعد دو اتفاق افتاد که باعث شد نظرم عوض شود. اولا باهاش ​​برخورد کردم این مقاله ای است که واقعاً به درک مفاهیم استفاده از منوی همبرگر کمک می کند. به ویژه، سایت هایی با چنین منوهایی با کاهش جدی در تعامل کاربران مواجه می شوند. بررسی چنین آماری تازه شروع به تغییر نظر من کرد.

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

یافتن راه حل

در مورد دلایل عدم اعتقاد من به قدرت منوی همبرگر کافی است - وقت آن است که در مورد راه حل صحبت کنیم. ابتدا، من به مزایای خاص استفاده از منوی همبرگر نگاه کردم:

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

و اگر بخواهیم جایگزینی برای منوی همبرگر ایجاد کنیم، باید به نحوی مشکلات مربوط به آن را حل کند:

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

بخش دشوار: موبایل

تصمیم گرفتم از سخت ترین مشکل شروع کنم و ببینم آیا راه حل من برای طراحی های موبایل جواب می دهد یا خیر. پس از بررسی هزاران ایده، به این نتیجه رسیدم که منوی نوار تب iOS یکی از بهترین راه حل ها برای رابط های تلفن همراه است. بسیاری از مردم سعی کرده‌اند نوار برگه را قابل پیمایش کنند (برای قرار دادن بیش از پنج گزینه) یا "بیشتر" را به پیمایش اضافه کنند - چیزی مانند Plyushkin که یک اتاق اضافی دارد که به سرعت پر از آشغال می شود. همچنین، هر دوی این گزینه ها هنوز نیاز اصلی را برآورده نمی کنند - وضوح، دید همه احتمالات وجود ندارد. بنابراین برای رفع این مشکل با منوی تب چه کاری می توانید انجام دهید؟

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

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

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

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

کاربرد برای تبلت ها

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

دسکتاپ چطور؟

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

افشای کامل

نمی دانم اسم این کار را چه بگذارم. نوار لغزنده منبت؟ یا TABurger (TAB "tab" + همبرگر)؟ علاوه بر این، من نمی دانم آیا کسی قبلا راه حل مشابهی ایجاد کرده است یا خیر. با توجه به سادگی چنین منویی، نمی توانم تحمل کنم که فکر کنم اولین نفر بودم. من می دانم که چند برنامه از منوهای کشویی در برخی از دکمه های برگه ها (مانند Tweetbot) استفاده می کنند، اما آنها معمولاً به عنوان دسترسی سریع به ویژگی ها برای کاربران قدرتمند طراحی شده اند، نه به عنوان راهی برای ایجاد سلسله مراتب ناوبری. اگر چنین نمونه ای دارید در نظرات به من اطلاع دهید.
فرقی نمی کند که چنین منویی جدید باشد یا مدت هاست اختراع شده است. آنچه مهم است این است که آیا این راه حل ناوبری بهتر و خلاقانه تر از منوی همبرگر است یا خیر. به خودتان نگویید «این سایت جالب این منو دارد، پس باید بهترین باشد» یا «همه این کار را انجام می‌دهند، پس باید درست باشد». طراحی سزاوار رویکردی بهتر و متفکرانه تر است.
به روز رسانی ها
Collin Eberhardt در توییتر خاطرنشان کرد که همان رابط کاربری در ویندوزفون پیاده سازی شده است. من خودم کاربر ویندوزفون هستم و حق با اوست. اگرچه این نوع تعامل در ویندوز فون فقط برای گزینه "بیشتر" در نوار برگه استفاده می شود.

جیمز پریک مثال دیگری در توییتر زد. نگاهی به AHTabBarController ایجاد شده توسط آرتور همر بیندازید.

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

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

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

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

مجموعه امروزی شامل 20 نوع مختلف از نماد همبرگر است.

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

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

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

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

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

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

Burger Menu توسط Peter Twaury نسخه ای زیبا از این نماد است. ویژگی کلیدی این آیکون انتخاب رنگ هایی است که شبیه نان بریده شده و نان گوشت است.

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

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

این هنرمند یک انیمیشن کوچک ارائه می دهد که شامل تنها یک نماد منو، و چندین انتقال صاف است که با تبدیل به یک "X" معمولی (دکمه بستن) همراه است. هنگامی که ماوس را نگه می دارید یا کلیک می کنید، جلوه های ویژه ای وجود دارد.

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

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

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

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

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

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

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

این پروژه ثابت می‌کند که نماد همبرگر می‌تواند درخشان‌تر و جذاب‌تر به نظر برسد. این یک انتخاب عالی برای دستگاه های کوچک است که در آن چنین نمادی برای ناوبری لمسی مناسب است.

طراح یک نماد سه خط ساده و شیک را نشان می دهد که دگرگونی های مختلفی را برای تبدیل شدن به یک صلیب یا فلش انجام می دهد. انیمیشن شامل چندین راه حل است که می تواند برای هر پروژه ای مفید باشد.

نتایج

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

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

ایجاد یک طرح بندی HTML

اضافه کردن سبک های پایه CSS

اضافه کردن JS

بعد از اینکه خود منو ایجاد کردیم، باید فایل JS را متصل کرده و به جالب ترین قسمت برویم.

$(function())($(".menuToggle").on("click", function() ($("menu").slideToggle(300, function())( if($(this).css ("نمایش") === "هیچکدام")($(this).removeAttr("style"); ) ));

بیایید نگاهی دقیق تر به آنچه در اینجا نوشته شده است بیندازیم. در ابتدا، با کلیک بر روی دکمه "منو"، اطلاعات را قطع می کنیم. در داخل این رویداد، یک تابع slideToggle() را به منوی کشویی $(.menu") اضافه می کنیم که به آرامی منوی کشویی را باز و بسته می کند.

هنگام تغییر نسخه های سایت و کلیک کردن روی دکمه "منو" مشکل کوچکی وجود دارد، یعنی بلوک با خود آیتم های منو پنهان می شود زیرا به‌طور پیش‌فرض، تابع slideToggle() ویژگی «display: none» را هنگام بسته شدن اضافه می‌کند. برای رفع این اشکال، باید یک callback (یک تابع که پس از پردازش تابع اصلی فراخوانی می شود) برای تابع slideToggle () فراخوانی کنید. در داخل callback یک شرط می نویسیم. اگر یک ویژگی در بلوک منو برابر با "display: none" داشته باشیم، ویژگی "style" را حذف می کنیم.

نتیجه

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