مؤخرا بعض المواقع ، مثل هذا هو اللواء و كلك ، بدأت في عرض قائمة ديناميكية ومتحركة والتي تتغير عند التمرير لأسفل. تصغير التنقل الرئيسي لإتاحة مساحة أكبر للمحتوى. في هذا البرنامج التعليمي ، سأشرح كيف يمكنك إنشاء هذه القائمة بنفسك باستخدام HTML5 و CSS3 وقليل من jQuery.
يعد هذا النوع من القائمة رائعًا إذا كنت ترغب في التركيز بشكل خاص على المحتوى الخاص بك عبر الموقع الإلكتروني بأكمله ، كما يتيح لك إنشاء تنقل أكبر وأكثر تأثيرًا عند زيارة المستخدم الأولى لموقع ويب. يمكنك إظهار العلامة التجارية أو الشعار لموقعك على الويب بشكل أفضل ، وهو أمر رائع لعرض ما سبق وبعد إشراك المستخدم في إحدى الزيارات ، يخفي إصدار أصغر وأقل تمثيلاً ليسمح للمستخدم بالتركيز بشكل أساسي على المحتوى الخاص بك.
هناك عدة طرق للقيام بذلك. في هذا البرنامج التعليمي ، سأشرح كيفية إنشاء شريط قوائم ثابت بعرض كامل ، يتغير ارتفاعه إلى جانب الشعار ، مما يؤدي إلى إنشاء نسخة مصغرة مصغرة من الإصدار الأولي. إذا كنت تفضل ذلك ، يمكنك أيضًا استبدال صورة الشعار عن طريق شكل آخر للشعار ، مثل الأحرف الأولى أو الرمز ، ولكن ضع في اعتبارك أن الاتساق مهم جدًا هنا ، بحيث يفهم المستخدم كيف تغير العنصر وأن الغرض الرئيسي منه لا يزال هو الأصل. التنقل في الموقع.
قبل أن نبدأ ، يمكنك ذلك الخروج التجريبي أو قم بتنزيل المصدر من هنا .
سنبدأ بإنشاء كود HTML الأساسي الذي سنحتاجه. سنكون ملتصقين ببنية HTML5 بسيطة بالفعل لنقطة البداية.
How to create a dynamic top bar | Webdesigner Depot الآن بعد الانتهاء من شفرة HTML الأولية الخاصة بنا ، سنقوم بإضافة التعليمة البرمجية للقائمة بالإضافة إلى بعض التفاصيل الأخرى على رأس ملف HTML الخاص بنا.
How to create a resizing menu bar | Webdesigner Depot دعونا نحصل على تلك القائمة صغيرة!
نهاية السطر.
In our
: أضفنا العلامة الوصفية للمؤلف لتحديد منشئ الملف ؛ بعد ذلك أدرجنا reset.css الشهير في Eric Meyer والتي ستعيد تعيين كل عنصر تقريبًا في ملف HTML ، مما يمنحك مستندًا أنظف وأسهل للعمل عليه. وبما أننا سنستخدم jQuery لاحقًا ، في السطر الأخير من عنصر الرأس لدينا ، نقوم باستيراده من خلال jQuery CDN.قمت باستخدام hotlinked معظم الملفات للحفاظ على المستند بسيطًا قدر الإمكان ، ولكن ضع في اعتبارك أنه إذا كنت تفضل يمكنك تنزيل أحدث الإصدارات من جميع هذه الملفات واستخدامها محليًا على طول ملف HTML الخاص بك ، وهذا سوف يمنع المشاكل المحتملة مع توافقات الإصدار أو التغييرات في هذه الملفات في المستقبل.
في موقعنا
، استخدمنا HTML5 الافتراضي