» إضافات بلوجر
»شرح بالتفصيل طريقة تثبيت القائمة العلوية بعد التمرير لأسفل
شرح بالتفصيل طريقة تثبيت القائمة العلوية بعد التمرير لأسفل
مرحبا اخواني الكرام بمداونتكم درس اليوم سأتطرق فيه لإضافة تصلح لمنصة
بلوجر ... تشمل تثبيت القائمة العلوية عند تمرير الصفحة للأسفل طبعا يمكن إستخدام الطريقة حتى على قوائم أخرى على شرط أن تكون في الهيدر ، الفائدة من تثبيت القائمة عند تمرير الصفحة للأسفل هو منح المتصفح إمكانية التنقل بين مختلف أقسام الموقع بسهولة تامة، دون الحاجة إلى تمرير الصفحة إلى الأعلى في كل مرة يرغب فيها في اختيار عنصر أو تصنيف آخر من القائمة وكمثال القائمة الجانبية الخاصة بمدونتنا تذهب معك أينما ذهبت :) الأمر ليس معقدا كما يظنه البعض، بل بالعكس الأمر في غاية البساطة كل ما عليك فعله هو التركيز على ما سأشرحه .
شرح طريقة التركيب 1 . نتوجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي قبله [ فوقه ] .stick-navigation{
z-index: 9999;
position: fixed;
top: 0;
width: 100%;
}
5. ابحث عن : <head/>
b
6. ضع الكود التالي قبله [ فوقه ]
<script type="text/javascript">
var _rys = jQuery.noConflict();
_rys("document").ready(function () {
_rys(window).scroll(function () {
if (_rys(this).scrollTop() > 136) {
_rys('.stick-navigation').addClass("fixed-nav");
} else {
_rys('.stick-navigation').removeClass("fixed-nav");
}
});
});
</script>
* الأن وصلنا للمرحلة الأخيرة والتي ستطبق بها ثبيت القائمة
ـــ إذا كانت لديك قائمة علوية أو ثانوية وتريد تثبيت القائمة العلوية كل ما عليك فعله هو البحث عن كلمة متواجدة بالقائمة مثلا الرئيسية عندها سنجد فوقها أكواد مثال
<div class="stick-navigation"><div id='ar1web-menu'>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">نبذة</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</div>
عنوان التدوينة:
شرح بالتفصيل طريقة تثبيت القائمة العلوية بعد التمرير لأسفل
تقييم :
10
من 10
مرتكز على
24 تقييم.
المدير |زياد الزعبي
زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب
* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
محول الأكوادعبر عن تعليقكاترك بصمتك