تثبيت القائمة العلوية عند تمرير الصفحة للأسفل

تثبيت القائمة العلوية عند تمرير الصفحة للأسفل

يوجد الآن مشاهدة التعليقات : 10

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات


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




شرح طريقة التركيب


1 . نتوجه لقالب >> تحرير 


2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[


3. ضع الكود التالي قبله [ فوقه ]



.stick-navigation{
 z-index: 9999;
 position: fixed;
 top: 0;
 width: 100%;
}


5. ابحث عن : <head/>

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>

* العنصر الملون بالأصفر هو الكود الخاص بالقائمة كل قائمة تختلف عن بقيتها لذا قد يكون هناك أكثر من كودين ضع فوقهما هذا

الكود  : <div class="stick-navigation">


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


ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 10 تعليقات:

  1. موضوع جميل و جيد
    => profissional3.blogspot.com

    ردحذف
  2. جميل اخي ولاكن يقول لي هناك خطئ

    ‏حدث خطأ أثناء تحليل XML، في السطر 3511، العمود 10: The element type "div" must be terminated by the matching end-tag "</div>". إخفاء الإشعار


    ردحذف
    الردود
    1. أضف </div> في السطر الذي يظهر به المشكل

      حذف
  3. Ahmmad Ali Alalawneh1/10/2015

    السلام عليكم اخي..

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

    فما هو الحل واشكرك جزيلا على الموضوع الجميل

    ردحذف
  4. قمت بعملها ولكن لم تنجح هذا رابط مدونتي http://th3geekweb3.blogspot.com
    وهذا حسابي عى الفيس بوك http://fb.com/3mran.al7ariri ارجو منك حل لهذه المشكلة

    ردحذف
  5. زياد3/22/2015

    طب لو عايز اعمل القائمة دي في اسفل المدونة و تكون بنفس الصفات بتتحرك و مش شرط يكون فيها قوائم منسدلة ؟!
    هل دة ممكن ؟!

    ردحذف
  6. نعم يمكن أضف فقط في كود Css هذا المعرف : bottom: 0;

    ردحذف
  7. من يستطيع مساعدتي في مشكلة لااستطيع تغير اي شيئ في تخطيط مدونتي بسبب اختفاء التخطيط

    ردحذف
  8. السلام عليكم اخي اين ساضع الكود الثاني

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم