ما هو زر همبرغر Hamburger button فى المواقع – وكيف يعمل؟

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

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

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

ما هو زر همبرغر؟

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

a hamburger button

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

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

تاريخ زر الهامبورجر

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

المستخدمون بسرعة فهم المفهوم: انقر فوق الزر للحصول على قائمة منسدلة للتنقل أو روابط الميزات. ومع ذلك ، بعد تشغيله الأولي في Xerox ، لم يهتم المصممون حقًا بالبرغر – حتى بدأ Twitter في استخدامه في ظهر في iOS بعد عام وهو اليوم عنصر أساسي في تصميم الويب ، وغالبًا ما يظهر في الزاوية العلوية اليسرى أو العلوية اليمنى من صفحات الويب ويوفر مكانًا سهلاً لتخزين قوائم أكبر.

هامبرغر باتون بون-فيتس أند باكباك

لا يتم بيع الجميع لدور أزرار همبرغر على المواقع. يقول المنتقدون إن هذه الكعكة مبالغ فيها ، ورؤية مخاوف مثل:

الافتقار إلى العالمية

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

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

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

ولكن هناك أيضًا فوائد لنشر القوائم القائمة على الكعك على موقعك بما في ذلك:مظهر نظيف –

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

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

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

أمثلة على زر همبرغر

أزرار همبرغر موجودة في جميع أنحاء الويب – إليك بعض الأمثلة لتوضيح كيف قد تبدو.

زر همبرغر في تطبيق Android

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

hamburger button example: pipcorn website

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

hamburger button example: gmail app

hamburger button example: gmail app زر همبرغر على موقع ويب hamburger button example: gmail app

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

hamburger button example: pipcorn website

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

hamburger button example: pipcorn website

زر همبرغر الإبداعي

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

the wordpress dashboard Using CSS to add a hamburger button.

كيفية عمل زر همبرغر باستخدام CSS

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

the wordpress dashboard

توجه إلى أسفل القائمة الجانبية اليسرى الجديدة وحدد “CSS إضافي”.

Using CSS to add a hamburger button.

أخيرًا ، سترى صفحة محرر CSS تتيح لك إدخال كود CSS واختباره قبل دفعه إلى موقعك.

hamburger-button-tutorial-5

حان الوقت الآن لبناء هذا البرجر. لنفترض أنك تريد إنشاء رمز ثابت. وفقًا لـ W3Schools ، فإن أفضل مكان للبدء هو HTML:

a hamburger button tutorial from w3schools

يوفر هذا الرمز الأساس لزر الهامبرغر الخاص بك.

بعد ذلك ، أضف CSS الخاص بك:

hamburger-button-tutorial-5

النتيجة قياسية ، زر هامبرغر ثابت يؤدي إلى قائمة بمجرد النقر عليها. hamburger button example: gmail app

طهي أيقونة زر همبرغر ديناميكي باستخدام CSS

hamburger button example: gmail app

إذا كنت ترغب في تجربة شيء أكثر تعقيدًا ، ففكر زر قائمة متحرك يتحول إلى رمز “إلغاء” عند النقر عليه. إليك كيف تبدأ:

a hamburger button tutorial from w3schools: html code

انقر لفتح القائمة ، وتتحول إلى هذا:

a hamburger button tutorial from w3schools: css code

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

لطهي هذا الخيار الديناميكي ، ابدأ مع HTML الخاص بك:

a hamburger button tutorial from w3schoolsL javascript code

إنشاء زر برجر بدون كتابة اكواد برمجية

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

إذا كان هذا هو ما تفضله ، ففكر في أدوات إنشاء مواقع الويب التي عرض خيارات برجر مدمجة.

HubSpot CMS for building your website. 1. مركز CMS the squarespace homepage

the webnode homepage

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

HubSpot CMS for building your website. 2. Squarespace the squarespace homepage

the site 123 homepage

صمم تصميمات نظيفة وجديدة المظهر باستخدام قوالب Squarespace ، واستخدم قوائم الهامبرغر البسيطة الخاصة بهم لعقد خيارات التنقل من المستوى الثاني.

HubSpot CMS for building your website. 3. Webnode the squarespace homepage

New Call-to-action

25 مليون مستخدم قاموا ببناء مواقع باستخدام Webnode – أضف المحتوى أو غيّره ببضع نقرات فقط ، وقم بتخصيص الموضع وخيارات القائمة المنسدلة لأي قوائم هامبرغر بسرعة.

HubSpot CMS for building your website. 4. موقع123

the site 123 homepage

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

تلاعب بها

لا يحب الجميع زر همبرغر.

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