24‏/07‏/2014


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




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


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


10 Blogger تعليقات
Disqus
10 التعليقات
المشرف
avatar

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

المشرف
avatar

جميل اخي ولاكن يقول لي هناك خطئ

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


المشرف
avatar

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

المشرف
avatar
Ahmmad Ali Alalawneh 1/10/2015
delete

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

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

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

المشرف
avatar

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

المشرف
avatar
زياد 3/22/2015
delete

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

المشرف
avatar

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

المشرف
avatar
المشرف
avatar

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

المشرف
avatar

السلام عليكم اخي اين ساضع الكود الثاني

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة