Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

كيفية بناء تقليص على شريط ثابت مع مؤسسة :

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Mohammed Ali (you can also view the original English article)

هناك اتجاه شائع جدًا في هذه الأيام هو استخدام التنقل الثابت ، والذي يتقلص ليصبح أقل تطفلاً أثناء تمرير المستخدم لأسفل الصفحة. في هذا البرنامج التعليمي ، سأوضح لك كيف يمكنك تحقيق ذلك عن طريق استخدام ZURB Foundation Top Bar و css و jQuery . لإكمالها ، سنضيف استعلامات وسائط متعددة لجعل قائمتنا سريعة الاستجابة. هيا بنا نبدأ

المستلزمات :

ستحتاج إلى شيئين للحصول على قبضتك الجيدة على هذا البرنامج التعليمي:

  • الفهم الأساسي ل Foundation Topbar
  • الفهم الأساسي للمؤسسة و The Grid System
  • معرفة العمل مع ساس والبوصلة
  • تجربة صغيرة في استخدام jQuery لبعض التعامل مع الأحداث

هيا بنا

أولاً ، سنقوم بإعداد بيئة العمل الخاصة بنا. إذا كنت لا تعرف كيفية القيام بذلك باستخدام Compass و Sass ، فراجع قسم "Getting Started" (بدء التشغيل) في "إنشاء شريط أعلى شريط خارج الملاحي" مع Foundation 5.

قم بإنشاء مشروع التأسيس الجديد واستخدم ساعة البوصلة لتجميع مشروعك. سنقوم بإنشاء style.scss الخاصة بنا في مجلد scss لتخصيصاتنا وبعض التصميم العام. مع هذا الإعداد ، سنغوص في بنية HTML العامة ، دعنا نذهب!

إعداد بنية HTML

الخطوة 1: الترميز العام

بعد أن بدأت مشروعًا جديدًا للمؤسسة ، انتقل إلى ملف index.html وابدأ بإزالة كل المحتوى بين علامات النص ، باستثناء النصوص قبل علامة النص الختامي مباشرةً. ثم أضف السطر التالي إلى Head ، لاستيراد style.css.


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


هنا قمنا بإنشاء قسم رأس ، بما في ذلك nav ، قسم المحتوى وقسم تذييل. هناك أمران يجب ملاحظتهما:

  • nav لديها قسم، .important-class والتي سنستخدمها لإخبار jQuery عن العنصر الذي يجب استهدافه عندما ننتقل إلى الأسفل.
  • لقد قمنا بتضمين div مع تصنيف header-fill. سنستخدم هذا لوضع بعض المساحة بين أعلى المتصفح وقسم المحتوى ، حيث سيتم إصلاح رأس الصفحة ولديه فهرس z أعلى ثم باقي العناصر في الصفحة.

الخطوة 2: أعلى شريط العلامات

بعد ذلك ، سنكتب HTML ل Top Bar. نحن بحاجة إلى منطقة عنوان لشعارنا مع ul وقسم مع لتخزين عناصر القائمة لدينا. ألقِ نظرة على HTML التالي:



لقد أضفنا ul مع فئة title-area حيث نحتفظ بشعارنا. بعد ذلك ، لدينا section مع فئة من القسم top-bar-section ومعul .right ، الذي يحتوي على جميع عناصر القائمة. تحتوي صورتنا على logo-image والتي سنحتاجها أيضًا في jQuery لاحقًا في هذا البرنامج التعليمي.

الخطوة 3: النتائج حتى الآن

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

إنشاء Sass

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

الخطوة 1: التصميم العام

للبدء ، سنقوم بإعطاء جميع أقسامنا بعض التصميم الأساسي. نلقي نظرة على Sass أدناه:


نحن نستخدم متغير اللون الأساسي هنا ، والذي سنستخدمه لبعض من تصميم Top Bar. لدينا القسم رأس ديه لطيفة، خفية مربع الظل، بحيث يبدو في الواقع وكأنه عائم فوق ما تبقى من المحتوى. من خلال تعيين موضعها على الوضع الثابت وجعل الرقم القياسي z: 999 ، نتأكد من أن التنقل يلتصق بأعلى المستعرض عند التمرير لأسفل وأنه يظل فوق كل العناصر الأخرى في الصفحة.

contain-to-grid فئة لديها اللون الأبيض الشفاف خفية، حتى أننا عندما انتقل، يبدو كما لو كان يتحرك الرأس على رأس كل العناصر الأخرى. ما زلنا بحاجة إلى إصلاح هذه القائمة ، لذلك دعونا نعتني بذلك بعد ذلك.

الخطوة 2: تصميم Topbar

الآن ، سوف نقوم بإضافة التصميم لإضفاء مظهر جميل وأنيق على Top Bar. يمكنك أيضًا ضبط بعض إعدادات الشريط العلوي في _settings.scss ، ولكن سأوضح لك كيفية إجراء ذلك باستخدام عمليات التخصيص المخصصة الخاصة بنا. يفسر sass أدناه ما يحدث في الحالات التالية:

ملاحظة: ونحن في طريقنا لتحريك padding-on-my-header الطبقة تحت قواعد شريط الأعلى. يعد هذا ضروريًا لتجاوز المساحة الموجودة في الشريط العلوي.

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

الخطوة 3: النتائج حتى الآن

دعونا نلقي نظرة على ما لدينا حتى الآن. من المؤكد أنها بدأت تبدو وكأنها شيء! ومع ذلك ، لا تزال القائمة كبيرة قليلاً عند التمرير لأسفل الصفحة. هذا هو المكان .padding-on-my_header خطوات الفصل

تأثير jQuery

دعونا نستخدم القليل من السحر jQuery لإضافة .padding-on-my_header الفصل على التمرير وتغيير الشعار إلى حجم أصغر.

الخطوة 1: إنشاء init.js

سنقوم بإنشاء ملف init.js لإدخال رمز jQuery الخاص بنا. ضعه في مجلد / js وقم بتضمين السطر التالي في أسفل ملف الفهرس ، قبل علامة النص الختامي مباشرةً ، لتضمين النص البرمجي:

سيتضمن init.js الخاص بنا ما يلي:

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

  • نجد شعار شعارنا واستبدلنا بمصدر الصورة مع شعارنا الأصغر.
  • بعد ذلك ، نبحث عن .important-class وإضافة فئة أخرى إليها: .padding-on-my-header

عندما نعود وننظر أسفل 50 بيكسل ، نقوم بالعكس ونقوم بإزالة طبقة الحشو ، مع إعادة شعار الشعار الكبير.

الخطوة 2: التحقق من النتائج

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

استعلامات الوسائط لتحسين المحمول

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

كما ترى ، قمنا بنقل النطاق الصغير من 0em - 40em إلى 0em - 64em ، الذي يحسب إلى 1024 بكسل ؛ لدينا المدى المتوسط يبدأ الآن في 64em. احفظ إعداداتك لتصبح التغييرات سارية المفعول ودعنا نصل إلى استعلاماتنا الإعلامية!

الخطوة 1: إضافة استعلامات الوسائط

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

دعونا نلقي نظرة على ما قمنا به هنا:

  • أزلنا جميع الحشو والهوامش في الشريط العلوي.
  • أعطينا نص القائمة ورمز الهامبرغر لونًا رماديًا ، بدلاً من اللون الأبيض الافتراضي ، بحيث يكون مرئيًا على الشريط العلوي الأبيض.
  • لقد أصلحنا شعارنا الأكبر ليلائم الشريط العلوي.
  • في القسم top-bar-section ، نعمل على تصميم عناصر القائمة والاستجابة والحالات النشطة.
  • نقوم أيضًا بتغيير حجم الشعار الأصغر وتغيير موضعه.
  • أزلنا بعض الحشوة والهوامش في قائمتنا المتجاوبة الموسعة.
  • أخيرًا ، لقد قمنا بالتعبئة header-fill أصغر ، بحيث تساوي ارتفاع شريط Top.

الخطوة 2: استمتع النتائج النهائية الخاصة بك!

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

الخلاصة :

مع بعض السحر Sass و jQuery ، تمكنا من تحويل الشريط الأساسي القوي والقوي من مؤسسة ZURB إلى رأس لاصق رائع ، عصري مع بعض التأثيرات السلسة. جاهز للاستخدام على مشاريعك الخاصة أو الخاصة بعملائك. استمتع !

المصادر


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.