Bitrix إصلاح الشريط الجانبي للشعار وتغيير PHP. تخطيط من عمودين (شريط جانبي ثابت ومحتوى مرن). إنشاء شريط جانبي على الجانب الأيمن. HTML وCSS

أبسط مثال على الشريط الجانبي العائم الثابت في HTML+CSS+JS.

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

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

لا تنس الاتصال بـ jQuery

$(function() ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); ) $sidebar.css("top", $topPosition); )); ));

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

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

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

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

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

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

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

يستخدم مثالنا تصميم كتلة div.

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

سيتم استخدام الكتلة الرئيسية لإنشاء تحديد المواقع وكذلك التحجيم.

أولا، دعونا نقرر تحديد المواقع. بالنسبة للحاوية العامة، قمنا بتعيين الموضع النسبي - الخاصية (الموضع: نسبي). تم تعيين الخاصية (الموضع: مطلق) للأعمدة.

سيؤدي استخدام هذا النوع إلى تسهيل وضع السماعات داخل الكتلة. للقيام بذلك، سوف نستخدم خصائص الحركة: و و و.

في مثالنا، يبدو الرمز كما يلي:

لغة البرمجة

صفحة الاختبار

العمود 1

العمود 2

ينسخ

CSS

تَخطِيط (

الموقف: نسبي؛

الخلفية: رغبا (119، 115، 115، 0.58)؛

الشريط الجانبي، .content (الموضع: مطلق؛)

الشريط الجانبي (

الخلفية: #C6DD7D؛

محتوى (

الخلفية: #F4ECCE؛

ينسخ

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

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

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

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

تحتاج إلى إجراء بعض التعديلات الطفيفة على كود CSS الخاص بك. يعد ذلك ضروريًا حتى تكون القائمة على الجانب الأيمن. نحن لا نغير خصائص العرض وتحديد المواقع!

الآن دعونا نلقي نظرة على طريقة مختلفة تمامًا عن الطريقة السابقة. الفرق هو أنه يمكنك إنشاء تنقل أفضل بدون تعليمات برمجية CSS أو HTML تقريبًا.

لن تحتاج إلى كتابة كل التعليمات البرمجية يدويًا، فكل العمل سيتم في المُنشئ نفسه.

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

من أجل تسجيل شريط جانبي في WordPress، ستحتاج إلى كتابة عدة وظائف فيه ملفات PHP. ستحتاج بشكل أساسي إلى صفائف من البيانات التي ستشير إلى عناصر واجهة المستخدم وعلامات div الخاصة بها.

في مثالنا، نأخذ في الاعتبار الشريط الجانبي الأيمن، بالإضافة إلى الشريط الجانبي للتذييل.

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

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

بعد ذلك، يمكنك البدء في إنشاء الشريط الجانبي الخاص بك. لوضعه في الإطار هناك وظيفة خاصة - عرض. والتي سوف تضع وضع العناصر.

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

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

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

ما هي متطلبات التخطيط:

• تخطيط مطاطي بعمودين
• الشريط الجانبي بعرض ثابت 300 بكسل
• يمتد المحتوى إلى العرض المتبقي بالكامل.
• تم الضغط على التذييل إلى الأسفل (في هذا الدرس لن أوضح كيف يتم ذلك).

إذا جعلت الكتل تطفو، فيجب أن تمنحها عرضًا ثابتًا (لا يمكنك ضبط شريط جانبي واحد على 300 بكسل والمحتوى على 100%). في هذه الحالة، إما أن ينزلق المحتوى لأسفل أو سيظهر تمرير أفقي بمقدار 300 بكسل إلى اليسار. حسنًا، الشيء الرئيسي هو أن نفهم أن هذه الطريقة لا تناسبنا.

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

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

ولكن بالنسبة لي هذه ليست طريقة جيدة جدًا أيضًا!

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

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

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

مرحبا عزيزي القراء لموقع بلوق. هذه ملاحظة لنفسي حتى لا أنسى ما فعلته بالضبط عندما أريد إعادة كل شيء مرة أخرى. بدأ كل شيء عندما اقترح أحد القراء الكتابة عن مكون إضافي لـ WordPress يسمى Q2W3 Fixed Widget (Sticky Widget)، والذي يمكنه جعل أي عنصر واجهة مستخدم في الشريط الجانبي عائمًا أو، بمعنى آخر، ثابتًا.

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

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

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

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

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

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

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

إذا كنت تتذكر، في المقالة حول تحسين سرعة تحميل الصفحة، فأنت بحاجة إلى محاولة دمج جميع CSS وJS في واحدة مشتركة (بمعنى اثنين - واحد للأنماط والآخر للبرامج النصية). لذا، في الواقع، أضفت أسطر التعليمات البرمجية الواردة أدناه إلى هذا الملف. على الرغم من أنه يمكنك إضافتها مباشرة إلى كود HTML، محاطًا بعلامات البرنامج النصي. على سبيل المثال، يمكن القيام بذلك في قالب header.php داخل علامات الرأس.

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

في حالتي، يبدو رمز إصلاح القائمة العلوية كما يلي:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

اسمحوا لي أن أذكرك أنه يمكنك لصق هذا الجزء من التعليمات البرمجية في:

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

على عكس الكود الأصلي، اضطررت أيضًا إلى إضافة العرض: "100%"، وإلا فإن حجم القائمة سينخفض ​​في العرض، مما قد يفسد الصورة بأكملها.

انظر، من أجل الوضوح، سأقدم كود Html الذي يتم من خلاله تشكيل القائمة العلوية في القالب الخاص بي مدونة ووردبريس(إنه موجود في ملف header.php الخاص بي من ):

• جديد
• الأفضل
• أين تكسب المال
• دعاية
• خريطة الموقع
• جهات الاتصال
• قمة

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

• يرجى ملاحظة أنه إذا كانت هناك علامات اقتباس مفردة في الكود الموجود في echo "" ، فيجب حذفها، أي. ضع شرطة مائلة عكسية (\") أمام كل منها، بدون قوسين بالطبع.

  بشكل عام، اتضح كما اتضح. سيتعين عليك أن تقرر بنفسك كيفية إرفاق هذا بموضوعك على وجه التحديد - عندما يكون لديك الوقت، يكون من الممتع "إثارة عقلك". شكرًا لك.

  كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

  أنت قد تكون مهتم

  WebPoint PRO عبارة عن سمة WordPress سريعة الاستجابة مع وظائف واسعة وتحسين كفاءة محرك البحث الفني
  Share42 - برنامج نصي لإضافة أزرار الشبكات الاجتماعية والإشارات المرجعية إلى الموقع (يوجد خيار اللوحة العائمة)