قائمة برجر لطيفة في css. إنشاء قائمة همبرغر سريعة

من فيتالي روبتسوف ولم يستطع مقاومة الرغبة في تحقيق ذلك.

في هذا البرنامج التعليمي ، سأوضح لك كيفية القيام بذلك باستخدام CSS فقط ، دون أي JavaScript. لذلك ، سنرى بعض حيل CSS (و SCSS) التي ستتيح لنا تحقيق رسوم متحركة سلسة تقريبًا مثل هذه الصورة المتحركة المتحركة.

إليك مثال على ما سنفعله:

وضع علامة على

لنبدأ ببنية HTML التي سنستخدمها. انظر التعليقات لفهم أفضل.

أنماط SCSS الأولية

الآن دعنا نضيف بعض الأنماط الأساسية للحصول على الشكل الذي نريده. الشفرة واضحة ومباشرة.

/ * أنماط القاعدة * / * (box-sizing: border-box؛) html، body (margin: 0؛) body (font-family: sans-serif؛ background-color: # F6C390؛) a (text-decoration: لا شيء ؛). حاوية (الموضع: نسبي ؛ الهامش: 35 بكسل تلقائي 0 ؛ العرض: 300 بكسل ؛ الارتفاع: 534 بكسل ؛ لون الخلفية: # 533557 ؛ تجاوز: مخفي ؛)

عملية التبديل

قبل أن نبدأ في بناء بقية الواجهة ، دعنا نضيف عملية تبديل للانتقال بسهولة من حالة إلى أخرى.

HTML الذي نحتاجه موجود بالفعل. والأسلوب الذي يجعلها تعمل مثل هذا:

// Hide the checkbox #toggle (display: none؛) // أنماط الحالة "المفتوحة" عند تحديد مربع الاختيار #toggle: محدد (// أي عنصر تريد تصميمه عند فتح القائمة يأتي مع محدد هنا ~ // أنماط فتح قائمة التنقل ، على سبيل المثال & ~ .nav ())

صنع دولة مغلقة

لجعل الحالة مغلقة ، نحتاج إلى تحويل عناصر القائمة إلى خطوط للحصول على أيقونة الهامبرغر. هناك عدة طرق لتحقيق هذا التحول. قررنا القيام بذلك على النحو التالي:

وهنا الكود الذي ينفذ هذا.

مدة الانتقال: 0.5 ثانية ؛ // اعرض عناصر التنقل كخطوط تشكل عنصر التنقل الخاص بأيقونة الهامبرغر (الموضع: نسبي ؛ عرض: كتلة مضمنة ؛ تعويم: يسار ؛ مسح: كلاهما ؛ اللون: شفاف ؛ حجم الخط: 14 بكسل ؛ تباعد الأحرف: - 6.2 بكسل ؛ الارتفاع: 7 بكسل ؛ ارتفاع السطر: 7 بكسل ؛ تحويل النص: أحرف كبيرة ؛ مسافة بيضاء: nowrap ؛ تحويل: scaleY (0.2) ؛ انتقال: $ مدة الانتقال ، عتامة 1 ثانية ؛ // إضافة عرض لـ السطر الأول &: nth-child (1) (letter-spacing: -8px؛) // إضافة عرض للسطر الثاني &: nth-child (2) (letter-spacing: -7px؛) // إعدادات بدء العناصر من السطر الرابع &: nth-child (n + 4) (letter-spacing: -8px؛ margin-top: -7px؛ opacity: 0؛) // احصل على خطوط رمز الهامبرغر &: قبل (الموضع: مطلق ؛ المحتوى: ""؛ الجزء العلوي: 50٪؛ اليسار: 0؛ العرض: 100٪؛ الارتفاع: 2 بكسل؛ لون الخلفية: # EC7263؛ التحويل: translateY (-50٪) scaleY (5)؛ الانتقال: $ مدة الانتقال ؛))

لاحظ أننا وضعنا الأنماط الأساسية فقط هنا لعناصر التنقل الأكثر أهمية. يمكنك العثور على الكود الكامل على جيثب.

إنشاء قائمة مفتوحة

لإنشاء قائمة مفتوحة ، نحتاج إلى استعادة عناصر التنقل من الأسطر إلى الروابط النصية العادية ، وكذلك إجراء عدد من التغييرات الطفيفة. دعونا نرى كيف نفعل ذلك:

مدة الانتقال: 0.5 ثانية ؛ #toggle: محدد (// فتح & ~ .nav (// استعادة عناصر التنقل من "الخطوط" في عنصر التنقل لرمز القائمة (اللون: # EC7263 ؛ تباعد الأحرف: 0 ؛ الارتفاع: 40 بكسل ؛ ارتفاع الخط : 40px؛ margin-top: 0؛ opacity: 1؛ transform: scaleY (1)؛ transfer: $ transfer-duration، opacity 0.1s؛ // Hide lines &: before (opacity: 0؛))))

السحر يكمن في الأشياء الصغيرة

إذا ألقينا نظرة فاحصة على gif ، فسنرى أن جميع عناصر القائمة لا تتحرك في وقت واحد ، ولكن في نمط رقعة الشطرنج. يمكننا القيام بذلك في CSS أيضًا! بشكل أساسي ، نحتاج إلى تحديد كل عنصر (مع: nth-child) وتعيين قيمة تأخير الانتقال على التلاشي. هذا بالتأكيد عمل متكرر. ماذا لو كان لدينا المزيد من العناصر؟ لا تقلق ، يمكننا أن نفعل ما هو أفضل مع القليل من سحر SCSS:

العناصر $: 4 ؛ تأخير الانتقال بالدولار: 0.05 ثانية ؛ .nav-item (// تعيين التأخير لعناصر التنقل عند إغلاقfor $ i من 1 إلى $ عناصر (&: nth-child (# ($ i)) (تأخير $: ($ i - 1) * $ انتقالات - تأخير ؛ تأخير انتقال: تأخير دولار ؛ &: قبل (تأخير انتقال: تأخير دولار ؛))))

لاحظ أنه من خلال هذا الرمز ، سنحصل على سلوك الخطوة المطلوب للرسوم المتحركة الختامية. نحتاج إلى حساب التأخير بالدولار الذي يختلف قليلاً عن الرسوم المتحركة الافتتاحية لاستعادة الخطوة إلى الوراء. مثله:

تأخير $: ($ items - $ i) * $ transfer-delay؛

انتاج |

انتهينا من قائمتنا الغريبة! لقد قمنا أيضًا بتضمين بعض العناصر الوهمية كما في صورة gif المتحركة ويمكنك أن ترى.

لذلك ، قمنا بإنشاء قائمة CSS بسيطة وعملية فقط. ومع ذلك ، إذا كنت لا ترغب في استخدام نظام تبديل CSS ، فيمكن استبداله بشكل مثالي ببضعة أسطر من JavaScript دون بذل الكثير من الجهد.

نأمل أن تكون قد استمتعت بهذا البرنامج التعليمي ووجدته مفيدًا!

لقد قمنا بالتخطيط فقط حتى الآن.

5. قم بتنزيل مكتبة jquery-3.3.1.min.js

نحن نتواصل مع لغة البرمجة المستند قبل علامة الإغلاق جسم ملفين ، أحدهما لا يزال فارغًا.

6. إنشاء حدث في JS

نكتب الكود التالي إلى ملف script.js

$ (الوظيفة () (
$ (". menuBurger"). on ("click" ، الوظيفة () (
$ (". menu"). slideToggle (200، function () (
إذا ($ (this) .css ("display") \u003d\u003d\u003d "لا شيء") (
$ (هذا) .removeAttr ("النمط")؛
}
});
});
});

لن نخوض في التفاصيل شبيبة رمز ، سنقتصر على التعليقات العامة فقط. يمكنني تقديم المشورة لأولئك الذين يرغبون في البرمجة في شبيبة

هذا الخط $ (". menuBurger"). on ("click" ، الوظيفة () ( يراقب حدثًا عند نقرة على عنصر به فئة .menuBurger.

$ (". menu"). slideToggle (200، function () ( هنا يتم تطبيق الوظيفة على القائمة نفسها slideToggle ()، والتي تعمل على توسيع العناصر المحددة على الصفحة أو تصغيرها بالتناوب في 200 مللي ثانية.

$ (هذا) .removeAttr ("النمط")؛ - يزيل من في النسق الأنماط عرض لا شيء؛

الآن عند النقر قائمة همبرغر يتوسع وينهار ، ولكن هناك مشكلة ، عند توسيع القائمة ينقل المحتوى الرئيسي للموقع إلى أسفل ، وبشكل صحيح إذا كان أعلى المحتوى. في الوقت نفسه ، تتأثر سرعة تحميل الصفحة ، خاصة على الإنترنت عبر الهاتف المحمول.

6. توسيع القائمة فوق المحتوى

يتم حل هذه المشكلة مع تحديد المواقع في القائمة.

في الأساس CSS رمز يحتاج إلى إضافة

قائمة (
الموقف: نسبي ؛
}

في الاستعلام الإعلامي: .menu (
الخلفية: #eee ؛
الموقف: مطلق ؛
}

بعد ذلك، قائمة همبرغر سوف تتكشف على المحتوى الرئيسي. يجب أن يكون الأمر كذلك.

قائمة همبرغر في CSS

1. تعطيل وحذف كافة البرامج النصية

2. تضاف في لغة البرمجة ملف بين العلامات شعبة و ماي سطر من التعليمات البرمجية

3. استبدال العلامة شعبة مع الفصل .menuBurger تشغيل ضع الكلمة المناسبة

4. التعادل إدخال معرف مع السمة للتسمية بجانب #menuCSS

نتيجة لذلك ، عند النقر فوق الرمز قائمة همبرغر، تظهر علامة اختيار في خانة الاختيار.

5. أضف فئة زائفة إلى استعلام الوسائط التحقق

#menuCSS: محدد (
عرض لا شيء؛
}

هذا يعني أنه عند النقر فوق الرمز ، يتم وضع مربع الاختيار في مربع الاختيار ، ولكنه يكون مخفيًا على الشاشة ، ويظهر الرمز فقط. الفكرة هي أنه إذا لم يتم تحديد خانة الاختيار ، فسيتم إغلاق القائمة ، وإذا تم تحديدها ، فسيتم توسيع القائمة. يتم تعليق الحدث مع فتح وإغلاق القائمة في حالة مربع الاختيار.

6. إخفاء إدخال في CSS

#menuCSS (
عرض لا شيء؛
}

7. قم بتغيير الكود في الفقرة 5 ، انظر أعلاه في المقالة لما يلي

#menuCSS: محدد +. menu (
العرض محجوب؛
}

إذا كان الارتباط بين ضع الكلمة المناسبة و إدخال #menuCSS علامة (التحقق)، يتم توسيع القائمة. هذا هو كل السحر قائمة همبرغر يعمل على التنظيف CSS وإذا أضفت رسمًا متحركًا سلسًا إليه ، فلا فرق بين القائمة الموجودة في القائمة شبيبة، لن تشعر.

حاول تقليل المتصفح وسترى بوضوح كيف يعمل قائمة همبرغر CSS

انتاج |

كلا الخيارين يعملان. القائمة على شبيبة، دعنا نقول - صحيح ، من حيث استخدام الكود. القائمة على CSS - هذا "عكاز" ، نوع من "الإبداع" ، مناسب تمامًا لأولئك الذين لا يريدون أن يفهموا شبيبة وسوف يطبقونه فقط على مشاريعهم. بالنسبة للمواقع المصممة حسب الطلب ، لا توجد "عكازات" ، أوصي بشدة بعمل تخطيط وشحذ لمزيد من الاستخدام شبيبة، متخصصون آخرون.

ربما تكون قد سئمت بالفعل من قراءة المقالات والاستماع باستمرار إلى مناقشات مختلفة حول ثلاثة أسطر قصيرة من قائمة الهامبرغر. هل هذه خدعة سيئة في تصميم الواجهة؟ أم ليس سيئا؟ هذا المنشور ليس كذلك - لن يحكم على ما إذا كانت هذه القائمة جيدة أم سيئة. خلاصة القول هي أنني لا أعتقد أنه أفضل حل تصميم على أي حال. لكن قائمة الهامبرغر لها أيضًا نقاط قوتها ، خاصة عند استخدامها في تصميم الهاتف المحمول حيث تكون المساحة محدودة. فماذا يمكننا أن نفعل؟ فقط اقبل قائمة الهامبرغر كما هي ، بالرغم من كل العيوب ، وتواصل؟ يبدو أن الكثير من المواقع والتطبيقات قد تعاملت مع هذا. وأعتقد أنني أستطيع أن أفعل الأفضل.

ثم حدث شيئان جعلني أغير رأيي. أولاً ، عثرت على. هذه مقالة تساعدك حقًا في فهم الآثار المترتبة على استخدام قائمة الهامبرغر. على وجه الخصوص ، تعاني المواقع التي تحتوي على مثل هذه القائمة من انخفاض خطير في تفاعل المستخدم. بدأت مراجعة هذه الإحصائيات في تغيير رأيي.

وقع الحادث التالي عندما كنت أشاهد زميلًا يحاول استخدام تطبيق ويب جديد يحتوي على مثل هذه القائمة. كان هذا مطورًا كان على دراية بواجهة قائمة الهامبرغر ، ولكن عندما يتعلق الأمر باستخدام التطبيق لاحتياجاته الخاصة ، سأل بصوت عالٍ ، "كيف يمكنني الوصول إلى هناك؟" ضع في اعتبارك ، هذا واحد من أذكى الأشخاص الذين أعرفهم ، ولم يفكر حتى في لمس رمز قائمة الهامبرغر. إذا كان هناك شخص ذكي جدًا يواجه مشكلات في التنقل ، فماذا يعني ذلك عن المستخدم العادي؟ اكتسب رأيي أخيرًا أساسًا متينًا.

إيجاد حل

يكفي عن أسباب عدم إيماني بقوة قائمة الهامبرغر - حان الوقت للحديث عن الحل. بادئ ذي بدء ، استكشفت الفوائد المحددة لاستخدام قائمة الهامبرغر:

• قابلية التوسع: ربما يكون هذا هو الإضافة الرئيسية والسبب الرئيسي وراء اختيار العديد من المواقع والتطبيقات لها. يمكنك وضع الكثير من عناصر التنقل خلف أيقونة صغيرة.
• صحة: هذا يترافق مع قابلية التوسع ، ولكن ليس نفس الشيء. يريد المصممون إنشاء تصميمات نظيفة وأنيقة مع ترك مساحة كافية للمحتوى الرئيسي. يضفي استخدام قائمة الهامبرغر إحساسًا بالبساطة البصرية التي ستجذب أي مصمم.

وإذا أردنا إنشاء بديل لقائمة الهامبرغر ، فيجب أن يحل المشكلات المرتبطة به بطريقة ما:

• الوضوح: يجب أن يكون من الممكن العثور بسهولة على عناصر التنقل ، خاصة لمن يستخدمون المنتج لأول مرة.
• المشاركة: يجب أن توفر الواجهة تلميحات وتعليقات توضح ما يمكن للمستخدم فعله بالمنتج ومتى يكون من المناسب استخدام ميزات معينة.

الجزء الصعب: المحمول

قررت أن أبدأ بأصعب مشكلة وأرى ما إذا كان الحل الخاص بي يعمل مع تصميمات الأجهزة المحمولة. بعد التفكير في الكثير من الأفكار ، توصلت إلى استنتاج مفاده أن قائمة شريط علامات تبويب iOS هي واحدة من أفضل الحلول لواجهات الهاتف المحمول. حاول الكثير من الأشخاص جعل شريط علامات التبويب قابلاً للتمرير (لاستيعاب أكثر من خمسة خيارات) أو إضافة "المزيد" إلى التنقل - شيء مثل Plyushkin ، الذي يحتوي على غرفة إضافية تملأ بسرعة بالخردة. أيضًا ، لا يزال كلا الخيارين لا يفيان بالمتطلبات الرئيسية - الوضوح والرؤية لجميع الميزات مفقودة. إذن ما الذي يمكنك فعله بقائمة علامات التبويب لإصلاح ذلك؟

الحل هو الجمع بين الهامبرغر وشريط علامة التبويب في نهج واحد. والنتيجة هي شريط علامات تبويب يفتح مجموعة من الخيارات لكل عنصر قائمة.

لقد أنشأت تطبيقًا لاختبار أداء الفريق لتوضيح منهجي أثناء العمل. باستخدام هذه الطريقة ، يمكن للمستخدم أن يرى بوضوح الوظائف الرئيسية وطرق استخدام المنتج. وبدلاً من النوم بقائمة كاملة من عناصر القائمة المخفية خلف أيقونة الهامبرغر ، يظهر للمستخدم عدة خيارات تتعلق بعلامة التبويب التي نقر عليها. لذا فإن التنقل أسهل في الفهم والاستيعاب ، فكل ما تحتاجه دائمًا في متناول اليد ، ويسمح للمستخدم بمشاهدة التسلسل الهرمي للتطبيق.

ميزة أخرى لهذا التصميم هي القدرة على استخدام الإشعارات السياقية. في حالة قائمة الهامبرغر ، لديك مكان واحد فقط لعرض هذه الإخطارات. إذا التزمت بتخطيط شريط علامات التبويب ، فيمكنك إعطاء مطالبات للمستخدم في أي من عناصر القائمة المحددة.

بطبيعة الحال ، فإن أكبر مكسب مع هذا النهج هو قابلية التوسع. نعم ، ما زلت مقيدًا بخمس فئات ، لكن هذا شيء جيد. بصراحة ، أعتقد أن أي موقع يمكن أن يلائم خياراته في خمس فئات إذا كان المصمم ذكيًا في التنقل. في الواقع ، في كل فئة من هذه الفئات قد يكون هناك خمسة أو ستة بنود فرعية أخرى.
في المجموع ، هناك 30 خيار تنقل ممكنًا دون الشعور بالإرهاق للمستخدم ودون شغل مساحة الشاشة بأكملها.

تطبيق على الأجهزة اللوحية

دمج شريط علامات التبويب هذا في الأجهزة اللوحية كما يبدو غريبًا. الأجهزة اللوحية أوسع بكثير ، وكان استخدام نفس واجهة المستخدم مثل الهاتف المحمول أمرًا سخيفًا مثل المراهق في الملابس التي نشأ عليها. لذلك ذهبت في الاتجاه الآخر. بدلاً من وضع شريط علامات التبويب في الأسفل ، قمت بوضعه على الجانب. اتضح أنه أكثر ملاءمة من حيث استخدام مساحة الشاشة وبدا طبيعيًا جدًا. بالإضافة إلى ذلك ، يمسك العديد من المستخدمين الجهاز اللوحي بجانبه ، لذا فهذه هي المنطقة المستهدفة بلمسة الإصبع.

ماذا عن سطح المكتب؟

استعد ... قائمة قابلة للسحب. هذا صحيح - جرب هذا النهج لواجهة سطح المكتب وستواجه حقيقة لا يمكن إنكارها: هذا الخيار ليس جديدًا على الإطلاق. كانت القائمة المنسدلة موجودة منذ سنوات ، ويعرف أي شخص تقريبًا (حتى والدتك) كيف تعمل. هذا هو جمال هذا النهج - لا شيء جديد.

الكشف الكامل

لا أعرف ماذا أسمي هذا الشيء. درج مبوب؟ أو TABurger (TAB “tab” + burger)؟ علاوة على ذلك ، لا أعرف ما إذا كان أي شخص قد ابتكر حلاً مشابهًا من قبل. نظرًا لبساطة مثل هذه القائمة ، لا يمكنني الاعتراف بفكرة أنني كنت الأول. أعلم أن بعض التطبيقات تستخدم القوائم المنزلق للخارج في بعض أزرار علامات التبويب (مثل Tweetbot) ، ولكن يتم تنفيذها عادةً كوصول سريع إلى الميزات للمستخدمين المتقدمين بدلاً من إنشاء تسلسل هرمي للتنقل. إذا كان لديك مثل هذا المثال ، فأخبرني بذلك في التعليقات.
لا يهم ما إذا كانت هذه القائمة جديدة أو تم اختراعها لفترة طويلة. ما يهم هو ما إذا كان حل تنقل أفضل وأكثر إبداعًا مقارنة بقائمة الهامبرغر. توقف عن إخبار نفسك بأن "هذا الموقع الرائع يحتوي على هذه القائمة ، لذلك يجب أن يكون الأفضل" أو "الجميع يفعل ذلك ، لذلك هذا صحيح". يستحق التصميم نهجًا أفضل وأكثر عمقًا.
التحديثات
لاحظ كولين إيبرهاردت على Twitter أن نفس واجهة المستخدم يتم تنفيذها في Windows Phone. أنا مستخدم Windows Phone بنفسي وهو على حق. على الرغم من استخدام هذا النوع من التفاعل في Windows Phone فقط لخيار "المزيد" في شريط علامات التبويب.

أعطى جيمس بيريش مثالًا آخر على Twitter. ألقِ نظرة على AHTabBarController الذي أنشأه آرثر همر.

أصبحت أيقونة همبرغر بسيطة وعملية وبديهية ولا تنسى ، مثل أي علامة طريق ، اتجاهاً حقيقياً العام الماضي وجزءاً لا يتجزأ من أي موقع حديث وتصميم تطبيقات الهاتف المحمول.

يحاكي هذا الرمز البسيط شكل وأسلوب قائمة القوائم ، وهو مثالي للأجهزة ذات الشاشات الصغيرة ومواقع الويب حيث يكون المرئي مهمًا ويجب أن يكون التنقل بعيدًا عن الطريق. إنه حل فعال للغاية وقابل للتطبيق يلبي متطلبات عالم اليوم.

مثل أي عنصر آخر في الواجهة ، قد تحتوي أيقونة الهامبرغر على بعض الانحرافات عن الإصدار الأصلي ، بناءً على احتياجات كل مشروع على حدة.

اعتمادًا على المشروع والموضوع ، يمكن أن تتخذ أيقونة الهامبرغر العديد من الأشكال التي تكمل التصميم أو تصبح سمة مميزة خاصة بها.

تتضمن مجموعة اليوم 20 نوعًا مختلفًا من أيقونة الهامبرغر.

تمنح أيقونة الهامبرغر من تصميم Dave Games الكثير من الطاقة الدافئة على الفور. يضيف أسلوب الرسوم المتحركة المرح ويخلق فقط المشاعر الأكثر إيجابية. يمكنك استخدام مثل هذا الرمز بأمان في معظم الواجهات المصورة الحديثة.

تم تصميم رمز أمواج المحيط هذا بواسطة مات ووكر. ستشعر بشعور رائع في مختلف المشاريع المخصصة للبحر. اللون الأزرق الفاتح هو اللون الرئيسي والحد المحيط به مما يجعل هذه الشارة حصرية.

سيسمح التنفيذ النظيف والمشرق والبارع لهذا البناء بالعمل كرمز قائمة في مواقع الطهي. في هذه الحالة ، ستحصل الواجهة على نكهة فنية لطيفة.

يقدم المصمم 10 إصدارات مثيرة للاهتمام من شارات الهامبرغر المصنوعة من الروح. تغطي السلسلة أنواعًا مختلفة من البرغر: أحدها بالجبن ، والآخر باللحم المقدد ، والثالث بالديك الرومي ، والعديد من الأنواع الأخرى. إذا كان لديك موقع ويب أو تطبيق جوال مخصص لمطعم للوجبات السريعة ، فمن المؤكد أنها ستكون مفيدة. إنها مثيرة للاهتمام بصريًا لدرجة أنها يمكن أن تجد مكانًا في أي موضوع تقريبًا.

وهذا المشروع يقدم لناقل همبرغر واقعي. في هذه الحالة ، يتم عمل زر الإغلاق على شكل بطاطس مقلية ، على شكل "X" ، مع أو بدون صلصة. هذا حل إبداعي يمكنه إضافة غرابة إلى تصميم صفحتك.

يتضمن موقع Star Wars الرسمي رمز هامبرغر مثير للدوران. ينقسم كل خط إلى قسمين للحصول على متجه انعكاس الضوء لسيوف الليزر. يعزز الحل التجربة الكلية للموقع ويقوي العلامة التجارية.

قائمة البرجر من تصميم Peter Twauri هي نسخة مصورة بشكل جميل من الأيقونة. السمة الرئيسية لهذه الشارة هي اختيار الألوان التي تحاكي قطع الخبز وكستلاتة اللحم.

تحتوي السلسلة على أنواع مختلفة من الهامبرغر ، والتي يتم تحقيقها بأسلوب خطي. هنا سوف تجد همبرغر مزدوج ، هامبورجر جبنة وسلطة ، ساندويتش مفتوح وعدد قليل آخر. سيكون العثور على الحل الأمثل لواجهتك الأنيقة والمسطحة أمرًا سهلاً لإضافة التوابل والنكهة.

يعرض الفنان ثلاثة إصدارات ممتعة من الزر: الهامبرغر الكلاسيكي ، والجبن ، والنقانق. يعتمد كل منها على لون واحد أو لونين ، مما يجعلها مناسبة لمجموعة متنوعة من الواجهات الصغيرة. هنا ، يخلق اللون النوع المناسب من الساندويتش.

يقدم الفنان رسمًا متحركًا صغيرًا يتضمن رمز قائمة واحدًا فقط ، والعديد من الانتقالات السلسة التي تصاحب التحويل إلى "X" عادي (زر الإغلاق). هناك تأثيرات خاصة تحدث عند تحريك الماوس أو الضغط عليه.

على عكس معظم الأمثلة المذكورة أعلاه ، توضح هذه العينة التلاعب الماهر بالوزن بدلاً من اللون. الخطوط العلوية والسفلية أكثر جرأة من الوسط وتخلق مظهر الهامبرغر الصحيح. تعامل الفنان مع المهمة بنجاح.

تختلف قائمة الرسوم المتحركة لأيقونة النينجا بواسطة Andrew Kovardakov عن معظم أزرار الهامبرغر ، وتقدم حلاً مثيرًا للاهتمام وغير مألوف ، مع نص فرعي غامض وجذاب. هنا ، كل سطر هو نينجا متجه.

وهذا الرمز هو رسم توضيحي لسلطة وبرغر بالجبن. يمكن أن تضيف نكهة إلى أي واجهة مملة. حل ممتاز لموقع مطعم أو مقهى.

هذا هو المقال حيث يمكنك العثور على بعض الأسباب المثيرة للاهتمام حول أيقونة القائمة العصرية. يتم تمييزه بصورة تعرض ثلاثة أشكال مختلفة لزر الهامبرغر. الأول عبارة عن رسم توضيحي مسطح من الدرجة الأولى ، والثاني عبارة عن أيقونة ملونة من ثلاثة أسطر ، والثالث نسخة أحادية اللون من الثانية ، وهي الخيار الأكثر شيوعًا بين المصممين.

يُظهر GIF انتقالات سلسة بين الحالة الأولية لهذا الرمز البسيط والأنيق ، وحالته النهائية. نظرًا لأن الرسوم المتحركة تبدأ من المحصلة النهائية ، فهي أقصر من الرسوم المتحركة الأخرى.

تبدو قائمة الهامبرغر في Liam Spradlin كمجموعة من الإشارات المرجعية المدرسية للكتب. هذا التنفيذ جريء وخشن إلى حد ما. يمكن ملاحظة هذا الرمز على الفور ، ومع ذلك ، قد يكون من الصعب العثور على بيئة مناسبة له.

لقد نظرنا حتى الآن إلى الرموز بشكل منفصل ، لكنها تعمل جيدًا مع الكلمات ، خاصةً عندما تكون كلمة "قائمة". بينما قد يبدو الأمر مبالغًا فيه ، إلا أنهما يبدوان متطوران معًا تتلاءم الخطوط الرفيعة جدًا 1 بكسل المستخدمة في هذه الحالة معًا مثل قطع الألغاز.

يثبت المشروع أن رمز الهامبرغر يمكن أن يبدو أكثر إشراقًا وجاذبية عند وضعه في إطار. يعد هذا خيارًا رائعًا للأجهزة الصغيرة ، حيث يكون هذا الرمز مناسبًا للتنقل باللمس.

يعرض المصمم رمزًا بسيطًا وأنيقًا من ثلاثة أسطر يخضع لتحولات مختلفة ، ويتحول إلى صليب أو سهم. تتضمن الرسوم المتحركة العديد من الحلول التي يمكن أن تكون مفيدة لأي مشروع.

حصيلة

للوهلة الأولى ، قد يبدو أنه لا ينبغي إيلاء الكثير من الاهتمام للأشياء الصغيرة مثل رمز القائمة. ولكن إذا أظهرت القليل من الخيال ، فيمكنك تحويله إلى نوع من الحماس لواجهتك. خاصة إذا بدأ المطورون في اللعب بمعناها واستخدموا الحيل الفنية لجعلها غير تقليدية وملفتة للنظر.