سلام. با شما همسایه. امروز می خواهم موضوع منوهای تلفن همراه را ادامه دهم و پیشنهاد می کنم این کار را انجام دهید اما فقط با استفاده از جی کوئری. برو
ایجاد طرح HTML
اضافه کردن سبک های اساسی CSS
nav (پیش زمینه: # 3e2597؛ padding: 0؛ margin: 0؛) .menu (لیست-سبک-نوع: هیچکدام؛ padding: 0؛ margin: 0؛) .menu li (شناور: سمت چپ؛) .menu li a ( نمایش: inline-block؛ padding: 10px 15px؛ color: #fff؛ text-decor: no؛) .wrapper (حداکثر عرض: 1024px؛ padding: 10px؛ margin: 0px auto؛) .menuToggle (رنگ: #fff؛ padding: 10px 15px؛ مکان نما: اشاره گر؛ نمایشگر: هیچکدام؛) بدن (ارتفاع: 100٪؛)media (حداکثر عرض: 640px) (.menuToggle (نمایش: بلوک ؛) .menu (نمایش: هیچکدام ؛ موقعیت: مطلق ؛ پیش زمینه: # 3e2597؛ عرض: 100٪؛ حاشیه سمت چپ: -10px؛ padding-left: 10px؛) .menu li (float: no؛))اضافه کردن JS
بعد از اینکه منو را خودمان گذاشتیم ، باید فایل JS را به هم وصل کنیم و قسمت سرگرم کننده را شروع کنیم.
$ (function () ($ (". menuToggle"). on ("click"، function () $ ("$ menu")) slideToggle (300، function () (if ($ (this) .css (" نمایش ") \u003d\u003d\u003d" هیچ ") ($ (این) .removeAttr (" سبک "))))))))))؛
بیایید نگاهی دقیق تر به آنچه در اینجا نوشته شده است بیاندازیم. در ابتدای کار ، آنها را با کلیک بر روی دکمه "منو" آویزان می کنیم. در داخل این رویداد ، عملکرد slideToggle () را به منوی کشویی $ (". منو") اضافه می کنیم که منوی کشویی را به آسانی باز و بسته می کند.
یک مشکل کوچک وجود دارد که هنگام تعویض نسخه های سایت و کلیک بر روی دکمه "منو" ، یعنی بلوکی که با خود آیتم های منو ایجاد می شود ، خواهیم داشت. به طور پیش فرض تابع slideToggle () بسته می شود "صفحه نمایش: هیچ" ویژگی اضافه می کند. برای رفع این اشکال ، باید برای عملکرد slideToggle () فراخوانی (پاسخی که پس از پردازش عملکرد اصلی فراخوانی خواهد شد) تماس بگیرید. داخل پاسخ به تماس ، ما یک شرط می نویسیم. اگر ما یک ویژگی در بلوک منو برابر با "نمایش: هیچ" داشته باشیم ، آنگاه ویژگی "سبک" را حذف می کنیم.
نتیجه
به این ترتیب سریع و ساده یک منوی همبرگر پاسخگو ایجاد کرده ایم که می توانید به راحتی در پروژه های من از آن استفاده کنید. می توانید منابع را بارگیری کنید. Corvax با شما بود. بله ، جلسات جدید!
شما احتمالاً از خواندن مقالات خسته شده اید و دائماً در مورد سه خط کوتاه یک منوی همبرگر به بحث های مختلف گوش می دهید. آیا این یک ترفند بد در طراحی رابط است؟ یا بد نیست؟ این پست مانند آن نیست - در صورت خوب بودن یا بد بودن این فهرست داوری نمی شود. نکته آخر این است که من فکر می کنم به هر حال بهترین راه حل طراحی نیست. اما منوی همبرگر همچنین نقاط قوت خود را دارد ، به خصوص هنگامی که در طراحی موبایل که فضای آن محدود است استفاده می شود. پس چه می توانیم بکنیم؟ فقط منوی همبرگر را همانطور که هست بپذیرید ، علی رغم همه عیب ها ، و حرکت کنید؟ به نظر می رسد بسیاری از سایت ها و برنامه ها با این موضوع مطابقت داشته اند. و فکر می کنم می توانم بهترین کار را انجام دهم.
و بعد دو اتفاق افتاد که باعث شد نظرم عوض شود. اول ، من بر روی. این مقاله ای است که به شما در درک پیامدهای استفاده از منوی همبرگر کمک می کند. به طور خاص ، سایت هایی با چنین منو از کاهش جدی درگیر شدن کاربر رنج می برند. بررسی چنین آماری تازه شروع به تغییر نظر من کرد.
حادثه بعدی وقتی اتفاق افتاد كه من در حال تماشای یك همكاری بودم كه سعی در استفاده از یک برنامه وب جدید داشت كه دقیقاً چنین منو داشت. این برنامه نویس بود که با رابط کاربری منوی همبرگر بسیار آشنا بود ، اما وقتی نوبت به استفاده از برنامه برای نیازهای خودش رسید ، با صدای بلند از او پرسید: "چگونه می توانم به آنجا بروم؟" لطفاً توجه داشته باشید که این یکی از این موارد است باهوش ترین مردمکه من می دانم و او حتی به لمس نماد منوی همبرگر فکر نکرده است. اگر شخصی باهوش دچار مشکلات ناوبری است ، این در مورد کاربر معمولی چه می گوید؟ سرانجام نظر من یک پایه محکم به دست آورد.
یافتن راه حل
در مورد دلایل عدم اعتقاد من به قدرت منوی همبرگر کافی است - وقت آن است که در مورد راه حل صحبت کنیم. برای شروع ، من مزایای خاص استفاده از منوی همبرگر را بررسی کردم:
- مقیاس پذیری: این احتمالاً دلیل اصلی و اصلی ترین دلیل انتخاب بسیاری از سایت ها و برنامه ها است. می توانید بسیاری از عناصر ناوبری را پشت یک نماد کوچک قرار دهید.
- دقت: این همراه با مقیاس پذیری است ، اما یکسان نیست. طراحان می خواهند ضمن اینکه فضای کافی برای محتوای اصلی را فراهم می کنند ، طراحی های تمیز و مرتب ایجاد کنند. استفاده از منوی همبرگر حس سادگی بصری را برای هر طراح جذاب می کند.
و اگر ما می خواهیم جایگزینی برای منوی همبرگر ایجاد کنیم ، باید به نوعی مشکلات مرتبط با آن را حل کند:
- قابل فهم: باید به راحتی عناصر ناوبری را پیدا کرد ، به خصوص برای کسانی که برای اولین بار از این محصول استفاده می کنند.
- درگیری: رابط باید نکات و بازخوردی را درمورد آنچه کاربر می تواند با محصول انجام دهد و چه زمان مناسب برای استفاده از ویژگی های خاص باشد ، ارائه دهد.
قسمت سخت: موبایل
من تصمیم گرفتم با سخت ترین مشکل شروع کنم و بررسی کنم که راه حل من برای آن کار می کند یا نه طراحی موبایل... پس از تأمل در مورد ایده های مختلف ، به این نتیجه رسیدم که منوی نوار تب iOS یکی از این موارد است راه حل های بهتر رابط های تلفن همراه بسیاری از افراد سعی کرده اند نوار برگه را پیمایش کنند (برای قرار دادن بیش از پنج گزینه) یا اضافه کردن "بیشتر" به ناوبری - چیزی مانند Plyushkin ، که یک اتاق اضافی دارد که به سرعت با آشغال پر خواهد شد. همچنین ، هر دو گزینه هنوز الزام اصلی را برآورده نمی کنند - وضوح ، دید کلیه ویژگی ها وجود ندارد. بنابراین برای رفع این مشکل چه کاری می توانید با منوی برگه انجام دهید؟
راه حل من ترکیب همبرگر و نوار برگه در یک رویکرد واحد است. نتیجه یک نوار زبانه است که مجموعه ای از گزینه ها را برای هر مورد از فهرست انتخاب می کند.
من یک برنامه معیار عملکرد تیم را برای نشان دادن رویکرد من در عمل ایجاد کردم. با استفاده از این روش ، کاربر می تواند عملکردهای اصلی و روش های استفاده از محصول را به وضوح مشاهده کند. و به جای خواب رفتن با یک لیست کامل از آیتم های منو که در پشت نماد همبرگر پنهان شده است ، به کاربر گزینه های مختلفی نشان داده می شود که به برگه ای که روی آنها کلیک کرده است مربوط می شود. بنابراین ناوبری درک و هضم راحت تر است ، همه چیز شما همیشه نیاز دارید ، به کاربر اجازه می دهد سلسله مراتب برنامه را ببیند.
از دیگر مزایای این طرح ، امکان استفاده از اعلان های متن است. در مورد منوی همبرگر ، فقط یک مکان برای نمایش این اعلان ها دارید. اگر به طرح نوار برگه می چسبید ، می توانید در هر یک از آیتم های منوی انتخاب شده ، اعلان هایی را به کاربر بدهید.
البته بزرگترین برد با این رویکرد مقیاس پذیری است. بله ، شما هنوز هم به پنج دسته محدود می شوید ، اما این یک چیز خوب است. راستش ، من فکر می کنم هر سایتی اگر طراح با خیال راحت ناوبری را انتخاب کند ، می تواند گزینه های خود را در پنج گروه قرار دهد. در واقع ، در هر یک از این دسته ها ممکن است پنج یا شش مورد فرعی دیگر وجود داشته باشد.
در کل 30 گزینه ناوبری ممکن است بدون احساس غرق شدن برای کاربر و بدون اشغال کل فضای صفحه به دست می آید.
استفاده از قرص ها
ادغام یک نوار برگه مانند این در تبلت ها به نظر عجیب است. قرص ها بسیار گسترده تر هستند و از همان رابط کاربری مشابه استفاده می کنند دستگاه های تلفن همراهبه همان اندازه یک نوجوان مضحک به لباسهایی که از مدتها پیش در آنجا بزرگ شده بود ، به نظر می رسید. بنابراین من به راه دیگر رفتم. به جای قرار دادن نوار برگه در پایین ، آن را در کنار هم قرار دادم. معلوم شد که از نظر استفاده از فضای صفحه راحت تر بوده و بسیار طبیعی به نظر می رسد. علاوه بر این ، بسیاری از کاربران تبلت را در کنار آن نگه می دارند ، بنابراین این منطقه مورد نظر برای لمس انگشت است.
در مورد دسک تاپ چطور؟
آماده شوید ... منوی بیرون کشیدن. درست است - این رویکرد را برای رابط دسک تاپ امتحان کنید و با یک واقعیت غیرقابل انکار روبرو هستید: این گزینه اصلاً جدید نیست. منوی اسلایدها سالهاست که وجود دارد ، و تقریباً در مورد هر کسی (حتی مادر شما) می داند که چگونه کار می کند. این زیبایی این رویکرد است - چیز جدیدی نیست.
افشای کامل
من نمی دانم چه چیزی را اینگونه صدا کنم. کشو زبانه دار؟ یا TABurger (TAB "tab" + همبرگر)؟ علاوه بر این ، من نمی دانم که آیا کسی قبلاً راه حل مشابهی ایجاد کرده است یا خیر. با توجه به سادگی چنین منو ، نمی توانم اعتراف کنم که من اولین نفر بودم. من می دانم که چند برنامه از منوهای کشویی در بعضی از دکمه های تب استفاده می کنند (مانند Tweetbot) ، اما آنها معمولاً به صورت زیر اجرا می شوند دسترسی سریع برای عملکردهای کاربران پیشرفته و نه به منظور افزایش سلسله مراتب ناوبری. اگر چنین نمونه ای دارید ، در نظرات به من اطلاع دهید.
فرقی نمی کند چنین منو جدید باشد یا مدتهاست که اختراع شده است. نکته مهم این است که آیا این یک راه حل بهتر ، خلاقانه تر ناوبری در مقایسه با منوی همبرگر است یا خیر. به خودتان بگویید "این سایت جالب این منو را دارد ، بنابراین باید بهترین باشد" یا "همه این کار را می کنند ، بنابراین درست است." طراحی مستحق برخوردی بهتر و متفکرانه تر است.
به روز رسانی ها
کالین ابرهارت در توییتر خاطرنشان کرد که همان رابط کاربری در حال اجرا است ویندوزفون... خود من کاربر ویندوز تلفن ، و او درست است. اگرچه این نوع تعامل فقط در ویندوز فون برای گزینه "بیشتر" در نوار تب استفاده می شود.
جیمز پریچ نمونه دیگری در توییتر خود ارائه داد. نگاهی به AHTabBarController که توسط آرتور همر ایجاد شده است.
ساده ، کاربردی ، بصری و به یاد ماندنی ، مانند هر نشانه راه ، آیکون همبرگر سال گذشته به یک روند واقعی تبدیل شد و بخشی جدایی ناپذیر از هر وب سایت مدرن و طراحی اپلیکیشن موبایل است.
این نماد ساده تقلید می کند ظاهر فهرست فهرست ، ایده آل برای دستگاه های دارای صفحه نمایش های کوچک و وب سایت هایی که دید در آن مهم است و ناوبری باید خارج از راه باشد. این یک راه حل بسیار مؤثر و کارآمد است که پاسخگوی خواسته های دنیای امروز است.
مانند هر عنصر رابط دیگر ، نماد همبرگر براساس نیازهای هر پروژه جداگانه ممکن است دارای برخی از انحرافات از نسخه اصلی باشد.
بسته به پروژه و موضوع ، نماد همبرگر می تواند اشکال مختلفی را به وجود آورد که طرح را تکمیل می کند یا به ویژگی متمایز خود تبدیل می شود.
مجموعه امروز شامل 20 تنوع مختلف از نماد همبرگر است.
نماد همبرگر توسط طراح دیو گیمز بلافاصله انرژی گرم زیادی به شما می دهد. سبک کارتون بازیگوش می افزاید و فقط مثبت ترین احساسات را ایجاد می کند. با اطمینان می توانید از چنین نمادی در بیشتر واسط های مدرن مصور استفاده کنید.
این نماد موج اقیانوس توسط مت واکر طراحی شده است. او در پروژه\u200cهای مختلفی که به دریا اختصاص داده شده ، احساس خوبی خواهد کرد. آبی روشن به عنوان رنگ اصلی و حاشیه ای در اطراف آن ، این نشان را منحصر به فرد می کند.
اجرای پاک ، روشن و شوخ باعث می شود این سازه مانند یک نماد منو در سایت های آشپزی کار کند. در این حالت ، رابط کاربری عطر و طعم زیبایی می بخشد.
طراح 10 را پیشنهاد می کند نسخه های جالب نشان های همبرگر که با روح ساخته می شوند. این سریال انواع مختلفی از همبرگر را در بر می گیرد: یکی با پنیر ، دیگری با بیکن ، سوم با بوقلمون و موارد دیگر. اگر وب سایت دارید یا برنامه تلفن همراهاختصاص داده شده به رستوران فست فود ، آنها مطمئناً مفید خواهند بود. آنها از نظر بصری بسیار جالب هستند که تقریباً در هر موضوعی می توانند جایگاهی پیدا کنند.
و این پروژه یک همبرگر بردار واقع گرایانه را ارائه می دهد. در این حالت ، دکمه بسته شدن به شکل سیب زمینی سرخ شده ، با شکل "X" ، با یا بدون سس ساخته می شود. این یک راه حل خلاقانه است که می تواند عجیب و غریب به طراحی صفحه شما بیفزاید.
سایت رسمی جنگ ستارگان شامل یک نماد همبرگر جالب است که می چرخد. هر خط به دو قسمت تقسیم می شود تا بتوان بردار بازتاب نور شمشیرهای لیزری را بدست آورد. راه حل باعث افزایش تجربه کلی سایت و تقویت برند می شود.
منوی برگر توسط پیتر Twauri نسخه زیبایی از این نماد است. ویژگی های کلیدی این نماد شامل مجموعه رنگهایی است که یک نان بریده و کتلت گوشت را تقلید می کنند.
این سریال انواع مختلفی از همبرگر دارد که با سبک خط تحقق می یابد. در اینجا یک همبرگر دوتایی ، همبرگر پنیر و سالاد ، ساندویچ باز و برخی دیگر پیدا خواهید کرد. برای پیدا کردن راه حل عالی برای رابط شسته و رفته و مسطح خود ، اضافه کردن جواهرات و طعم آن آسان خواهد بود.
این هنرمند سه نسخه جالب دکمه را به نمایش می گذارد: همبرگر کلاسیک ، پنیربرگر و هات داگ. هر کدام براساس یک یا دو رنگ ساخته شده اند و این باعث می شود انواع مختلف رابط های کوچک مناسب باشد. در اینجا ، رنگ نوع مناسب ساندویچ را ایجاد می کند.
این هنرمند یک انیمیشن کوچک را ارائه می دهد که تنها شامل یک نماد منو است ، و چندین انتقال صاف که همراه با تبدیل به یک "X" معمولی (دکمه بستن) است. جلوه های ویژه ای وجود دارد که هنگام حرکت یا فشار دادن ماوس رخ می دهد.
بر خلاف بسیاری از مثالهای فوق ، این نمونه نشان می دهد دستکاری ماهرانه از وزن و نه رنگ. خطوط بالا و پایین پررنگ تر از وسط هستند و ظاهر مناسب همبرگر را ایجاد می کنند. این هنرمند با موفقیت کار را انجام داد.
منوی انیمیشن نماد نینجا توسط اندرو کووارداکف با اکثر دکمه های همبرگر متفاوت است ، و یک راه حل جالب و غیر معمول ، با یک سبزه مرموز و جذاب ارائه می دهد. در اینجا ، هر خط یک نینجا بردار است.
و این نماد نمونه ای از سالاد و پنیر همبرگر است. این می تواند طعم و مزه را به هر رابط خسته کننده اضافه کند. یک راه حل عالی برای وب سایت رستوران یا کافه.
این مقاله ای است که می توانید استدلال جالبی در مورد نماد منوی مرسوم ، مد روز پیدا کنید. با تصویری مشخص شده است که سه تغییر از دکمه همبرگر را نشان می دهد. اولین نمونه یک تصویر تخت درجه یک ، دومی یک آیکون سه خط رنگی است و سوم نسخه نسخه تک رنگ از نمونه دوم - محبوب ترین انتخاب در بین طراحان.
GIF انتقال صاف بین حالت اولیه این نماد حداقلی و ظریف و وضعیت نهایی آن را نشان می دهد. از آنجا که انیمیشن از پایین شروع می شود ، کوتاه تر از سایرین است.
منوی همبرگر Liam Spradlin به نظر می رسد مجموعه ای از نشانه های مدرسه برای کتاب ها. این اجرای جسورانه و تا حدودی خشن است. چنین نمادی فوراً قابل توجه است ، اما یافتن یک محیط مناسب برای آن دشوار است.
تاکنون به طور جداگانه به نمادها نگاه کرده ایم ، اما آنها با کلمات خوب کار می کنند ، خصوصاً وقتی این کلمه "منو" است. در حالی که ممکن است این کار بیش از حد به نظر برسد ، اما آنها با هم پیچیده به نظر می رسند. خطوط فوق باریک 1px که در این حالت به کار می رود مانند قطعات پازل است.
این پروژه ثابت می کند که یک آیکون همبرگر می تواند در هنگام قاب بندی درخشان تر و جذاب تر به نظر برسد. این یک انتخاب عالی برای دستگاه های کوچک است ، جایی که چنین نمادی برای پیمایش لمسی مناسب خواهد بود.
طراح یک آیکون سه خط ساده و براق را نشان می دهد که تحت دگردیسی های مختلف قرار دارد و به یک صلیب یا پیکان تبدیل می شود. انیمیشن شامل چندین راه حل است که می تواند برای هر پروژه ای مفید واقع شود.
نتیجه
در نگاه اول ، به نظر می رسد که به چیزهای کوچک مانند نماد منو نباید توجه زیادی شود. اما اگر کمی تخیل از خود نشان دهید ، می توانید آن را به نوعی زرق و برق برای رابط کاربری خود تبدیل کنید. به خصوص اگر توسعه دهندگان شروع به بازی با معنی آن کنند و از ترفندهای هنری استفاده کنند تا آن را غیر متعارف و چشم نوازتر جلوه دهند.
